选择文本并为其添加标签

Question

关于这个主题有很多关于 SO 的问题，但我似乎找不到任何解决我的问题的方法，所以我决定问我的问题。我的情况是我有一个下拉列表，其中包含多个选项和iframe 内的文本区域。当用户在文本区域中选择一些文本并从下拉列表中选择一个选项时，所选文本将有一个a 标签环绕它，选项值将变为标签href。这是我的代码：

   var optionTag       = document.getElementById("option-id");
   var optionValue     = optionTag.options[optionTag.selectedIndex].value;
   var iframe          = document.getElementById("my-frame");
   var iframeContent   = iframe.contentDocument.body.innerHTML.split("<br>")[0];

    //get user selected text
   var iframeSelection = iframe.contentWindow.getSelection().toString();

    // and wrap a tag around it then add href equal to value of option
    var aTag        = "<a href=\"" + optionValue + "\">" + iframeSelection +"</a>";

   // replace user selected text with new a tag
   iframe.contentDocument.body.innerHTML = iframeContent.replace(iframeSelection,aTag)

此代码工作，但它只替换第一个单词，如果该单词已经存在。例如：

lorem ipsum click dolor sit amet click spum

如果用户选择第二个单词“click”并选择一个选项，那么我的代码将替换唯一的第一个单词“click”，如果我有多个单词“click”它仍然只替换第一个单词，但如果用户选择单词“ipsum”或“lorem”然后它工作正常。我不知道如何解决这个问题请帮忙。谢谢！

p/s: 我不想替换所有的“点击”字，我只想替换用户选择的确切部分。

Answer 1

问题是您的replace() 调用中的iframeSelection 是“点击”，而不是您之前选择的元素，因此它正在替换第一次出现的元素。

相反，请尝试获取您的选择范围，将其删除并将您的新元素附加到该范围。

var selection = iframe.contentWindow.getSelection();
range = selection.getRangeAt(0);
range.deleteContents();
range.insertNode(document.createElement(your_new_element)); 

如果没有您的 HTML，我无法进行测试，JSFiddle 会有所帮助。

Answer 2

问题在于 Javascript String.replace() 仅在将它与设置了全局标志的 RegExp 模式一起使用时才能像您期望的那样工作。幸运的是，this answer 有一个不错的解决方案。

改变这个：

iframe.contentDocument.body.innerHTML = iframeContent.replace(iframeSelection,aTag);

...进入这个：

iframe.contentDocument.body.innerHTML = iframeContent.replace( new RegExp(iframeSelection, 'g'), aTag );

它的作用是将您的搜索字符串转换为设置了全局标志的 RegExp 对象，因此每次出现都会被替换。

如果您的意图是只替换用户选择的确切部分，它会变得更加复杂，但您可以从this answer 找到所有需要的位。