javascript - 在用户突出显示的文本周围放置标签？

Question

我需要获取文本区域的用户选择区域，然后插入 <a>标记围绕它。

我用它来获取用户选择的区域:

var textComponent = document.getElementById('article');
var selectedText;

if (document.selection != undefined)
{
    textComponent.focus();
    var sel = document.selection.createRange();
    selectedText = sel.text;
}

// Mozilla version
else if (textComponent.selectionStart != undefined)
{
    var startPos = textComponent.selectionStart;
    var endPos = textComponent.selectionEnd;
    selectedText = textComponent.value.substring(startPos, endPos)
}

现在，我知道我可以对用户选择的文本进行字符串搜索并在其周围插入标签，但是如果用户选择的文本在文本中出现两次，会发生什么情况，例如。

Hello to you, goodbye to you.

如果用户突出显示他们想要的链接的第二个“你”，字符串替换肯定会在每个“你”实例周围放置一个标签。

最好的方法是什么？

Answer 1

你可以使用我的 jQuery plug-in为此(demo):

$("#article").surroundSelectedText('<a href="foo.html">', "</a>");

或者您可以使用 getInputSelection()我在 Stack Overflow 上发布了几次的函数，用于在所有主要浏览器中获取选择开始和结束字符索引，然后对文本区域的 value 进行字符串替换:

var sel = getInputSelection(textComponent);
var val = textComponent.value;
textComponent.value = val.slice(0, sel.start) +
                      '<a href="foo.html">' +
                      val.slice(sel.start, sel.end) +
                      "</a>" +
                      val.slice(sel.end);