Home / Questions / 55022
Accepted
user13558
Asked: 2020-03-14 10:56:25 +0800 CST 2020-03-14 10:56:25 +0800 CST

Process selected text from a textarea in JavaScript

  • 772

I'm programming in JavaScript and HTML , and I have a textArea (textarea) , and a divwhere I show that I resultadohave processed the content of the textArea.

But what I want is to process the selected text . That is, he resultadois:

Mark in bold and large size the selected part.

My code is the following:

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)
}
textarea{
  height: 100px;
  width : 400px;
}
<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>

javascript

1 Answers

  1. Best Answer

    To process the selected text , it is necessary to access two properties that the tag has textArea.

    • The property selectionStartis an integer indicating the position of the start of the selection .
    • The property selectionEndis another integer, indicating the position of the end of that selection .

    First we make a function to get the textarea (the textarea) . For this we will use document.getElementByIdand obtain the element that has idvalue "texto_html":

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

    In this case, you make a variable called área_textoand assign to it what the function returns obtener_textarea(), so the textareawill be the variable área_texto. We also do a similar function for the result area, we'll call it obtener_área_resultado().

    To access the selectionStartand properties selectionEnd, simply do área_texto.selectionStartand área_texto.selectionEnd. Once the variables with these positions are declared, I do the following:

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

    This means that I am assigning the result of processing the selection to the center , along with the start of the text on the left , and the end of the text on the right . All of that built as a single plain text, which will be styled by the HTMLdiv engine because I'm assigning it to a .

    The function procesar_selección, what it does is cut the text into three parts.

    • The del iniciois from the beginning of what is written in the text area to the beginning of the selection.

    • The del centrois from the start of the selection to the end of the selection.

    • The del finis from the end of the selection to the end of what is written in the text area.

    Finally, the three parts are concatenated, but the part of the is enclosed centrowith labels band big, so that it is displayed in bold and large .

    In addition to calling the function by pressing keyboard keys using keydownand keyup, I had it call the function by mouse movement, using mousedown, mouseupand mousemove. All of this is done with the property addEventListener.

    Full code:

    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>

    • 12