Question

我需要获得文本区域的用户选中区域, 然后在它周围插入标签。

我使用此选项获取用户选择区域 :

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

您可以为此使用我的""http://code.google.com/p/rangyinputs/" rel="nofoln noreferrer" >jQuery 插件 (http://ragyinputs.googlecode.com/svn/trunk/demos/textinputs_jquery.html" rel="nofoln noreferr"> demo :

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

您也可以使用 < a href=" https://stackoverflow.com/ questions/263743/ how-to-get-caret-position- in-textreare/3373056#3373056#3373056"\\ code>getInputSection () 函数, 以获取所有主要浏览器的选择起始和结束字符索引, 然后在文本区域 s 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);

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

从这一引用中修改的IE代码。

EDIT: Note Tim Down s comments about newlines. 可能使用他的解析,因为它更好。

友情链接