多次出现文本的 getSelection 替换第一次出现而不是正确的选择答案

【问题标题】：getSelection with multiple occurrence of text replaces first occurrence not the correct selection多次出现文本的 getSelection 替换第一次出现而不是正确的选择
【发布时间】：2011-06-02 00:10:34
【问题描述】：

当出现多次时，我很难选择文本并替换该选择。它总是恢复到第一次出现并替换它。

这是我正在使用的脚本，如果选择仅在我完美时出现。当它出现不止一次时，它会抓住第一个。

var self=$('#textarea');
GetSelected={};
GetSelected=function(){
    var txt='';
    if(window.getSelection){
        txt=window.getSelection();
    }
    else if(document.getSelection){
        txt=document.getSelection();
    }
    else if(document.selection){
        txt=document.selection.createRange().text;
    }
    return txt;
}

self.html(self.html().replace(selection, '<b>' + selection + '</b>'));

有什么我缺少的东西，知道要替换哪个选择吗？

【问题讨论】：

标签： javascript jquery getselection

【解决方案1】：

要替换您需要使用/g 的所有匹配项。请尝试self.html(self.html().replace('/' +selection+'/g', '<b>' + selection + '</b>'));

【讨论】：

【解决方案2】：

您需要对所选内容本身进行操作，而不是尝试查找文本。这会因浏览器而异：

var t = $("#textarea")[0];
if (t.setSelectionRange)
{
    var selStart = t.selectionStart;
    var selEnd = t.selectionEnd;
    var val = t.value;
    var startVal = val.substring(0, selStart);
    var selectedVal = val.substring(selStart, selEnd);
    var endVal = val.substring(selEnd);
    var bold = selectedVal.bold();
    t.value = startVal + bold + endVal;
}
else if (document.selection && document.selection.createRange)
{
    var selection = document.selection.createRange();
    selection.text = selection.text.bold();
}

【讨论】：

【解决方案3】：

这里的主要问题是，将 HTML 视为字符串并像您正在做的那样替换它的一部分是一种非常脆弱的方法（想想一段匹配的文本，其中一部分已经是粗体，或者包含例如，匹配选定的文本）。相反，您可以使用built-in browser behaviour to find matching text。这是适合您的情况的该问题的功能：

function doSearch(text) {
    if (window.find && window.getSelection) {
        document.designMode = "on";
        var sel = window.getSelection();
        sel.collapse(document.body, 0);

        while (window.find(text)) {
            document.execCommand("Bold", false, null);
            sel.collapseToEnd();
        }
        document.designMode = "off";
    } else if (document.body.createTextRange) {
        var textRange = document.body.createTextRange();
        while (textRange.findText(text)) {
            textRange.execCommand("Bold", false, null);
            textRange.collapse(false);
        }
    }
}

另外，GetSelected 函数是不正确的（尽管它在这种情况下巧合地确实有效），因为它在 IE Selection 对象。您还没有声明 GetSelected 变量。这是一个更简单更好的替代方法：

function GetSelected() {
    var txt = ""
    if (window.getSelection) {
        txt = window.getSelection().toString();
    } else if (document.selection && document.selection.type == "Text") {
        txt = document.selection.createRange().text;
    }
    return txt;
}

请注意，如果您使用我建议的方法，则根本不需要此功能。

【讨论】：