javascript - 如何将页面上选定的文本替换为其他文本？

Question

我正在尝试使用从上下文菜单调用的函数 switchText 将所选文本替换为另一个文本。

function switchText(info) {

var text = info.selectionText;     // selected text

// then I do some manipulations with 'text' and get 'text_to_replace'

var text_to_replace = "some text"; // text to replace

}

alert(text) 和 alert(text_to_replace) 工作正常，但我试图替换页面上选定的文本，但我不知道如何操作去做吧。我尝试了不同的方法，但没有成功。需要什么特殊权限吗？如果这是个愚蠢的问题，我很抱歉，我是 JS 初学者。

Answer 1

如果您希望能够在页面上的任何位置执行此操作，则需要能够为您的选择设置某种识别 ID。您必须通过某种内容脚本来完成此操作。您可以在Chrome Developer documentation中阅读更多相关信息。 。

此代码将允许您更改单个选择的文本

(仅在 Chrome 中测试)

function switchText(id) {
    // Gets the selection range
    // This is from Tim Down, linked below
    var range, sel = window.getSelection();
    if (sel.rangeCount && sel.getRangeAt) {
        range = sel.getRangeAt(0);
    }
    // Creates a new node range
    document.designMode = "on";
    if (range) {
        sel.removeAllRanges();
        sel.addRange(range);
    }
    // This is from user YeppThatsMe, also linked below
    document.execCommand("insertHTML", false, "<span id='own-id'>"+ document.getSelection()+"</span>");

    document.designMode = "off";

    // You can use either a variable or a string
    var someNewText = "-- You can make this whatever you want --";

    // Finds the new span and replaces the selection with your new text
    document.getElementById("own-id").innerHTML=someNewText;
};

源脚本

Tim's script

HTML5 inserCommand

最后一个注释

我没有花太长时间进行测试，脚本按原样只会更改每页的一个选择。您需要调整函数获取标签和属性信息的方式(将其更改为 getElementsByClassName？)以多次运行它，但这应该可行。