javascript - 选择文本并为其添加标签

Question

关于这个主题有很多问题，但我似乎找不到任何解决我的问题的方法，所以我决定提出我的问题。我的情况是我有一个下拉列表，其中包含多个选项和 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

如果用户选择第二个单词“单击”并选择一个选项，那么我的代码将仅替换第一个单词“单击”，如果我有多个单词“单击”，它仍然只替换第一个单词，但如果用户选择如果输入“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 会有所帮助。