Procesar el texto seleccionado de un área de texto en JavaScript

publicado por: Anonymous

Estoy programando en JavaScript y HTML, y tengo un textArea (área de texto), y un div donde muestro el resultado de haber procesado el contenido del textArea.

Pero lo que quiero es procesar el texto seleccionado. Es decir, que el resultado sea:

Marcar en negrita y tamaño grande la parte seleccionada.

Mi código es el siguiente:

_x000D_

_x000D_

function procesar_selección(texto)
{
  return texto
}
function procesar_selección_html()
{
  var texto = document.getElementById("texto_html").value
  resultado.innerHTML = procesar_selección(texto)
}

_x000D_

textarea{
  height: 100px;
  width : 400px;
}

_x000D_

<div>Escriba el texto a procesar:</div>
<textarea
  id = "texto_html"
  onkeyup   = "procesar_selección_html()"
  onkeydown = "procesar_selección_html()" >
</textarea>
<div id="resultado" ></div>

_x000D_

_x000D_

_x000D_

solución

Para procesar el texto seleccionado, es necesario acceder a dos propiedades que tiene la etiqueta textArea.

  • La propiedad selectionStart es un entero que indica la posición del inicio de la selección.
  • La propiedad selectionEnd es otro entero, que indica la posición del fin de esa selección.

Primero hacemos una función para obtener el textarea (el área de texto). Para esto usaremos document.getElementById y obtenemos el elemento que tiene id con valor "texto_html":

function obtener_textarea(){
    return document.getElementById("texto_html")
}

En este caso, se hace una variable llamada área_textoy se le asigna lo que devuelve la función obtener_textarea(), entonces el textarea será la variable área_texto. Además hacemos una función similar para el área del resultado, la llamaremos obtener_área_resultado().

Para acceder a las propiedades selectionStart y selectionEnd, simplemente hay que hacer área_texto.selectionStart y área_texto.selectionEnd. Una vez declaradas las variables con estas posiciones, hago lo siguiente:

obtener_área_resultado().innerHTML=procesar_selección(texto,inicio,fin)

Esto significa que estoy asignando el resultado de procesar la selección en el centro, junto con el inicio del texto a la izquierda, y el final del texto a la derecha. Todo eso construido como un solo texto plano, que el motor HTML le dará estilo porque lo estoy asignando a un div.

La función procesar_selección, lo que hace es cortar el texto en tres partes.

  • La del inicio es desde el inicio de lo escrito en el área de texto hasta el inicio de la selección.

  • La del centro es desde el inicio de la selección hasta el fin de la selección.

  • La del fin es desde el fin de la selección hasta el fin de lo escrito en el área de texto.

Por último, se concatena las tres partes, pero se encierra la parte del centro con etiquetas b y big, para que se muestre en negrita y grande.

Además de llamar a la función al presionar las teclas del teclado mediante keydown y keyup, hice que llame a la función mediante el movimiento del ratón, usando mousedown, mouseup y mousemove. Todo esto se hace con la propiedad addEventListener.

Código completo:

_x000D_

_x000D_

function obtener_textarea(){_x000D_
  return document.getElementById("texto_html")_x000D_
}_x000D_
function obtener_área_resultado(){_x000D_
  return document.getElementById("resultado")_x000D_
}_x000D_
function procesar_selección(texto,inicio_selección,fin_selección)_x000D_
{_x000D_
  var fin_texto = texto.length_x000D_
_x000D_
  var inicio = texto.slice(0               ,inicio_selección)_x000D_
  var centro = texto.slice(inicio_selección,fin_selección   )_x000D_
  var fin    = texto.slice(fin_selección   ,fin_texto       )_x000D_
_x000D_
  centro="<b><big>"+centro+"</big></b>"_x000D_
_x000D_
  return inicio+centro+fin_x000D_
}_x000D_
function procesar_selección_html()_x000D_
{_x000D_
  var área_texto = obtener_textarea()_x000D_
_x000D_
  var texto  = área_texto.value_x000D_
  var inicio = área_texto.selectionStart_x000D_
  var fin    = área_texto.selectionEnd_x000D_
_x000D_
  obtener_área_resultado().innerHTML=procesar_selección(texto,inicio,fin)_x000D_
}_x000D_
function agregar_eventos(elemento_html){_x000D_
  var eventos = ["keyup","keydown","mousedown","mouseup","mousemove"]_x000D_
  for(var i in eventos){_x000D_
    elemento_html.addEventListener( eventos[i], procesar_selección_html )_x000D_
  }_x000D_
}_x000D_
agregar_eventos( obtener_textarea() )

_x000D_

textarea{_x000D_
  height:100px;_x000D_
  width: 400px;_x000D_
}

_x000D_

<p>Escriba un texto y luego seleccione una parte para procesarlo:</p>_x000D_
<textarea id="texto_html"></textarea>_x000D_
<div id="resultado"></div>

_x000D_

_x000D_

_x000D_

Respondido por: Anonymous

Leave a Reply

Your email address will not be published. Required fields are marked *