Question

例如，假设我想突出显示textarea字段中的文本块，然后通过按下链接将<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/

如何使用javascript将突出显示的单词用一些标签包含在textarea中？

1 个答案: