如何用另一个文本替换页面上的选定文本？答案

【问题标题】：How to replace selected text on page with another text?如何用另一个文本替换页面上的选定文本？
【发布时间】：2014-01-30 15:07:13
【问题描述】：

我正在尝试使用从上下文菜单调用的函数 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 的初学者。

【问题讨论】：

文本来到一个 html 元素？
文本可以在任何html元素中。用鼠标选择的任何文本

标签： javascript google-chrome-extension

【解决方案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？）以多次运行它，但这应该可以工作。

【讨论】：

【解决方案2】：

更新以 Id 为目标的 html 元素

document.getElementById("idtotarget").innerHTML = switchText(document.getElementById("idtotarget").innerHTML)

【讨论】：

我没有特定的ID，选择的文字可以在任何页面的任何位置。