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_texto
y 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:
function obtener_textarea(){
return document.getElementById("texto_html")
}
function obtener_área_resultado(){
return document.getElementById("resultado")
}
function procesar_selección(texto,inicio_selección,fin_selección)
{
var fin_texto = texto.length
var inicio = texto.slice(0 ,inicio_selección)
var centro = texto.slice(inicio_selección,fin_selección )
var fin = texto.slice(fin_selección ,fin_texto )
centro="<b><big>"+centro+"</big></b>"
return inicio+centro+fin
}
function procesar_selección_html()
{
var área_texto = obtener_textarea()
var texto = área_texto.value
var inicio = área_texto.selectionStart
var fin = área_texto.selectionEnd
obtener_área_resultado().innerHTML=procesar_selección(texto,inicio,fin)
}
function agregar_eventos(elemento_html){
var eventos = ["keyup","keydown","mousedown","mouseup","mousemove"]
for(var i in eventos){
elemento_html.addEventListener( eventos[i], procesar_selección_html )
}
}
agregar_eventos( obtener_textarea() )
textarea{
height:100px;
width: 400px;
}
<p>Escriba un texto y luego seleccione una parte para procesarlo:</p>
<textarea id="texto_html"></textarea>
<div id="resultado"></div>