Question

我需要获取用户选择的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)
}

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

你好，告别你。

如果用户突出显示第二个＆＃39;你＆＃39;对于他们想要的链接，肯定是字符串替换会在每个＆＃39;你＆＃39;周围放置一个标签。

最好的办法是什么？

Answer 1

您可以使用我的jQuery plug-in（demo）：

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

或者你可以使用我在Stack Overflow上发布的getInputSelection()函数几次来获取所有主流浏览器中的选择开始和结束字符索引，然后在textarea的{{1}上进行字符串替换}：

value

Answer 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);

从this reference修改的IE代码。

编辑：请注意Tim Down关于换行的评论。此外，可能使用他的解决方案，因为它更好。

将标签放在用户突出显示的文本旁边

2 个答案: