首页 > 解决方案 > 使用js替换gmail上的文本

问题描述

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

斯卡纳里奥:

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)

标签: javascriptdomgoogle-chrome-extensiongmailrange

解决方案


有几件事可能会出错。

一个是我注意到div最初包含一个 textNode 和一些文本切换到一个包含多个 textNodes 的节点,并且所有文本都完全相同,并且考虑到您只使用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], rangeStart);
        range.setEnd(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);

祝你好运 :)


推荐阅读