📌  相关文章
📜  hi;ight word in textarea javascript(1)

📅  最后修改于: 2023-12-03 15:01:08.190000             🧑  作者: Mango

在文本框中高亮关键字 JavaScript

在编写 JavaScript 应用程序时，经常需要高亮显示文本框或输入框中的关键字或短语。本文将介绍如何使用 JavaScript 在文本框中实现高亮显示关键字的功能。

实现步骤
  1. 获取文本框中的输入值
  2. 使用 JavaScript 的字符串方法查找关键字
  3. 在匹配到的关键字周围添加 HTML 标签以高亮显示
实现代码

以下是基于 JavaScript 实现文本框中关键字高亮显示的示例代码。

function highlightTextarea(element, keyword) {
  // 获取文本框中的内容
  var text = element.value;
  
  // 使用正则表达式查找关键字
  var regex = new RegExp(keyword, 'gi');
  var result, indices = [];
  
  while((result = regex.exec(text))) {
    // 获取匹配到的关键字位置
    indices.push(result.index);
  }
  
  // 高亮显示关键字
  for(var i = indices.length - 1; i >= 0; i--) {
    var index = indices[i];
    text = text.slice(0, index) + '<mark>' + text.slice(index, index + keyword.length) + '</mark>' + text.slice(index + keyword.length);
  }
  
  // 将高亮后的文本放回文本框中
  element.innerHTML = text;
}
示例演示

以下是一个示例演示：

<!DOCTYPE html>
<html>
  <head>
    <title>Textarea Highlight</title>
    <script>
      function highlightTextarea(element, keyword) {
        // 获取文本框中的内容
        var text = element.value;
        
        // 使用正则表达式查找关键字
        var regex = new RegExp(keyword, 'gi');
        var result, indices = [];
        
        while((result = regex.exec(text))) {
          // 获取匹配到的关键字位置
          indices.push(result.index);
        }
        
        // 高亮显示关键字
        for(var i = indices.length - 1; i >= 0; i--) {
          var index = indices[i];
          text = text.slice(0, index) + '<mark>' + text.slice(index, index + keyword.length) + '</mark>' + text.slice(index + keyword.length);
        }
        
        // 将高亮后的文本放回文本框中
        element.innerHTML = text;
      }
    </script>
  </head>
  <body>
    <textarea id="myTextarea" cols="30" rows="5"></textarea>
    <br />
    <button onclick="highlightTextarea(document.getElementById('myTextarea'), 'JavaScript')">Highlight</button>
  </body>
</html>
注意事项

请注意，上述示例代码仅为演示原理，但它不是最佳实践。为避免 XSS 攻击，请避免使用 innerHTML 而改用 textContent 或 createTextNode 方法来插入文本。