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

在 JavaScript 中处理从文本区域中选择的文本

  • 772

我正在使用JavaScript和HTML进行编程，并且我有一个textArea (textarea)和一个div显示我resultado已经处理了textArea.

但我想要的是处理选定的文本。也就是说，他resultado是：

用粗体和大号标记选定的部分。

我的代码如下：

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

    要处理选定的文本，必须访问标记具有的两个属性textArea。

    • 该属性selectionStart是一个整数，指示选择的开始位置。
    • 该属性selectionEnd是另一个整数，表示该选择结束的位置。

    首先我们创建一个函数来获取textarea (textarea)。为此，我们将使用document.getElementById并获取具有idvalue的元素"texto_html"：

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

    在这种情况下，您创建一个名为的变量área_texto并将函数返回的内容分配给它obtener_textarea()，因此textarea将是变量área_texto。我们还为结果区域做了一个类似的功能，我们称之为obtener_área_resultado().

    要访问selectionStartand属性selectionEnd，只需执行área_texto.selectionStartand área_texto.selectionEnd。一旦声明了具有这些位置的变量，我将执行以下操作：

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

    这意味着我将处理选择的结果分配给中心，左边是文本的开头，右边是文本的结尾。所有这些都构建为单个纯文本，将由HTMLdiv引擎设置样式，因为我将其分配给.

    函数procesar_selección，它的作用是将文本分成三部分。

    • delinicio是从文本区域中写入内容的开头到所选内容的开头。

    • delcentro是从选择的开始到选择的结束。

    • delfin是从选择的结尾到文本区域中写入的内容的结尾。

    最后，将三部分连接起来，但 的部分centro用标签b和括起来big，因此以粗体和大号显示。

    除了通过使用keydownand按下键盘键调用该函数外keyup，我还让它通过鼠标移动、使用mousedownandmouseup调用该函数mousemove。所有这一切都是通过财产完成的addEventListener。

    完整代码：

    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