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

Put a tags round user highlighted text?

本文关键字：文本 周围放 标签 显示 用户      更新时间：2023-09-26

我需要获取用户选择的文本区域，然后在它周围插入<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)
}

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

你好，再见。

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

最好的

方法是什么？

你可以使用我的jQuery插件（演示）：

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

或者，您可以使用我在 Stack Overflow 上发布几次的 getInputSelection() 函数来获取所有主要浏览器中的选择开始和结束字符索引，然后在文本区域的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);

为什么要捕获所选文本？ 您真正想要的是标签中的开始/结束位置。

var textComponent = document.getElementById('article');
var selectedText;
var startPos;
var endPos;
// the easy way
if (textComponent.selectionStart != undefined)
{
    startPos = textComponent.selectionStart;
    endPos = textComponent.selectionEnd;
}
// the hard way
else if (document.selection != undefined)
{
    textComponent.focus();
    var sel = document.selection.createRange();
    var range = document.selection.createRange();
    var stored_range = range.duplicate();
    stored_range.moveToElementText(textComponent);
    stored_range.setEndPoint( 'EndToEnd', range );
    startPos = stored_range.text.length - range.text.length;
    endPos = startPos + range.text.length;
} 
// add in tags at startPos and endPos
var val = textComponent.value;
textComponent.value = val.substring(0, startPos) + "<a>" + val.substring(startPos, endPos) + "</a>" + val.substring(endPos);

根据此引用修改的 IE 代码。

编辑：注意Tim Down关于换行符的评论。 另外，可能使用他的索尔特，因为它更好。

相关文章：