使用Chrome扩展程序替换Facebook状态更新中跨越多行的字符

Question

我创建了一个Google Chrome扩展程序,允许用户选择组件中的文本.这适用于大多数网站.但是,Facebook以不同方式处理其状态更新.看起来,即使您正在填写看似单个文本框的内容,它实际上也是div > div > span > span在此文本框中为每一行使用构造.我不知道他们为什么选择这样做,但它使得替换多行文本变得更加复杂.

有没有办法在Facebook状态更新中选择多行(甚至多行的连续部分)文本并替换数据？

我的代码的相关部分如下所示:

function replace_text(language){
    let selection = window.getSelection();
    string = selection.toString();

    /* This section contains code that uses string.replace to replace characters in the string. */

    document.execCommand("insertText", false, string);

}

基于我的代码现在的工作方式,如果我在一行上替换文本我没有问题.但是,如果我替换跨越多行的文本,我最终会得到一个空白的不可用输入框.毫无疑问,这是因为它正在删除部分HTML代码.如何修复我的代码,以便替换过程不仅适用于其他网站,还适用于Facebook？

Answer 1

截至目前，所有状态更新（和评论）的一个共同主题是它们的文本驻留在span属性data-text设置为 的单个或一组元素中true。那么让我们瞄准那些：

document.querySelectorAll("span[data-text='true']");

对我来说，我在状态字段和注释字段中输入了 3 行虚拟文本和 1 行虚拟文本。因此，当我在控制台中执行上述代码时，它会返回这四个累积行的数组：

>>> (4) [span, span, span, span]

有了该数组，我可以使用该Array.prototype.forEach()方法来迭代跨度并替换innerText：

document.querySelectorAll("span[data-text='true']").forEach(function(element) {
    element.innerText = element.innerText.replace('Lorem ipsum','Hello world');
});

然而，值得注意的是，这些更改是在 HTML 本身中进行的，Facebook 并不将其所有数据直接存储在 HTML 中。因此，当您在字段中键入文本、取消焦点、更改字段中的文本以及重新聚焦该字段时，可能会导致发生不良事件。当你重新聚焦时，我相信它会在你取消聚焦该字段之前从像 React 的 Virtual DOM 这样的隐秘来源获取文本内容的数据。为了阻止它这样做，需要在单击字段（真实或模拟）后或在用户使用某种MutationObserver（src）输入时进行更改。