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

我需要获取用户选择的textarea区域，然后在其周围插入标签。

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

 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) } 

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

你好，告别你。

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

什么是最好的方法呢？

Answer 1

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

 $("#article").surroundSelectedText('', ""); 

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

 var sel = getInputSelection(textComponent); var val = textComponent.value; textComponent.value = val.slice(0, sel.start) + '' + val.slice(sel.start, sel.end) + "" + val.slice(sel.end); 

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) + "" + val.substring(startPos, endPos) + "" + val.substring(endPos); 

从此引用修改的IE代码。

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