6

我需要获取用户选择的 textarea 区域，然后在<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)
}

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

你好，再见。

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

最好的方法是什么？

4

2 回答 2

5

您可以为此使用我的jQuery 插件（演示）：

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

或者，您可以使用getInputSelection()我在 Stack Overflow 上发布过几次的函数来获取所有主要浏览器中的选择开始和结束字符索引，然后在 textarea 上进行字符串替换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);
于 2012-05-24T14:02:44.560 回答
2

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

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 关于换行符的评论。另外，可能使用他的解决方案，因为它更好。

于 2012-05-24T14:12:38.483 回答