javascript - 如何使用 javascript 将突出显示的单词包含在带有一些标签的文本区域中？

Question

这个问题已经有答案了:

Change textcolor of specific parts in textarea (3 个回答)

已关闭 8 年前。

例如，假设我想突出显示文本区域字段中的文本 block ，然后用 <highlight>...</highlight> 将文本括起来。通过按链接来添加标签(例如 <highlight>(highlighted text appears here)</highlight> )——例如:

<textarea id="comment-body"></textarea>
<a href="#" class="highlight-words" onclick="highlightWords()">Highlight</a>

function highlightWords(){
   // code for enclosing highlighted text in textarea appears here
}

有什么想法吗？

Answer 1

您可以使用 JavaScript selectionStart 和 selectionEnd 属性来查找所选文本。这将为您提供开始和结束索引，您可以使用它们来更新字符串。

<textarea id="comment-body"></textarea>
<a href="#" class="highlight-words">Highlight</a>

$('a.highlight-words').click(function() {
  var textComponent = document.getElementById('comment-body');
  var fullText = document.getElementById('comment-body').value;
  var selectedText;
  var startPos = textComponent.selectionStart;
  var endPos = textComponent.selectionEnd;
  selectedText = textComponent.value.substring(startPos, endPos)

  if (selectedText.length > 0) {
    var newStr = fullText.substr(0, endPos) + '</highlight>' + fullText.substr(endPos);
    newStr = newStr.substr(0, startPos) + '<highlight>' + newStr.substr(startPos);

    textComponent.value = newStr;
  }
});

此处演示:http://jsfiddle.net/rqy7e0qh/