使用js替换Gmail上的文本

问题描述

我正在开发一个chrome扩展程序，它将替换部分文本。但是，它在Gmail上无法正常工作。

Scanario：

Gmail编写器包含以下文本-

我现在正对此。

我可以做到。

我想将其替换为-

我是这个新手。

我可以做到。

但是，每当我执行代码时，它都不会替换正确位置上的文本。 它会看到我的光标所在的位置，然后在此处附加文本，而不是替换预期的文本。 此代码段可在其他具有可编辑内容的网站上使用。

我当前的实现如下所示：

const range = document.createrange();
const ele = <div tag element for 'i am Now to this.' sentence>
// rangeStart and rangeEnd are the index which wraps word 'Now'

range.setStart(ele.childNodes[0],rangeStart);
range.setEnd(ele.childNodes[0],rangeEnd);
const selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
setTimeout(()=>{
        document.execCommand(
          "insertText",false,"new"
        );
      },0)

解决方法

有几件事可能会出错。

一个是我注意到div最初包含一个单个textNode，其中某些文本切换到包含多个textNode的节点，而所有文本上的文本完全相同，并且考虑到您仅在操作，这会产生许多问题与children[0]。

对我不起作用的另一件事是执行isertText

的文档

对我有用的东西是多么

        var range = document.createRange();
        var rangeStart = el.innerText.indexOf(s);
        var rangeEnd = rangeStart + s.length;
        var selection = window.getSelection();

        range.setStart(el.childNodes[0],rangeStart);
        range.setEnd(el.childNodes[0],rangeEnd);

        selection.removeAllRanges();
        selection.addRange(range);
        range.deleteContents();
        range.insertNode(document.createTextNode(ss))

我的整个测试场景：

(()=>{
    var all = document.getElementsByTagName('div');
    var n = all.length;
    var find = (s)=>{
        var result = [];
        for (var i = 0; i < n; i++) {
            var el = all[i];
            var text  = el && el.childNodes && el.childNodes[0] && el.childNodes[0].wholeText;
            if (text && text.match(s)) {
                result.push(el);
            }
        }
        return result.length ? result : false;
    }
    ;

    var replacer = (s,ss)=>(el)=>{
        try {
        var range = document.createRange();
        var rangeStart = el.innerText.indexOf(s);
        var rangeEnd = rangeStart + s.length;
        range.setStart(el.childNodes[0],rangeEnd);
        var selection = window.getSelection();
        selection.removeAllRanges();
        selection.addRange(range);
        range.deleteContents();
        range.insertNode(document.createTextNode(ss))
        }catch(ex){
            
        }

    }
    ;

    var elements = find('now');

    if (elements) {
        elements.map(replacer('now','new'))
    }

}
)(window);

祝你好运：）