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

我创建了一个GoogleChrome扩展，允许用户在组件中选择文本。这对大多数网站都非常有效。然而，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？

目前为止，所有状态更新（和评论）中的一个共同主题它们的文本位于一个或一组

span

元素中，属性

数据文本

设置为

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的虚拟DOM，获取文本的数据。为了阻止它这样做，需要在单击字段（真实或模拟）后进行更改，或者在用户使用某种

MutationObserver

（）键入时进行更改。

听起来并不容易。您可以确定所选文本的父级，以了解您所处的元素类型。如果选择跨越元素，则不确定这将如何工作。您可以向上查找innertext中包含选择字符串的元素，其中去掉了任何标记，但是替换将很困难，因为您似乎必须保持元素结构完整。如果所有其他方法都失败了，也许您可以计算出替换字符串，并模拟按键将其全部删除，然后重新输入文本。对不起，只是大声思考，以防引发想法。你准备好这个分机了吗？我需要它。@DavidDominguez不幸的是，我没能想出一个解决方案。如果你认为这会有帮助的话，请在这个问题上发表悬赏。