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设置为{{1 }}。所以我们的目标是：

true

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

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

使用该数组，我可以使用>>> (4) [span, span, span, span]方法迭代跨度并替换Array.prototype.forEach()：

innerText

但是，重要的是要注意这些更改是在HTML本身中进行的，而Facebook并不直接在HTML中存储所有数据。因此，当您在字段中键入文本，取消聚焦，更改字段中的文本以及重新聚焦该字段时，可能会导致发生意外事件。当你重新聚焦时，我相信它会从像React的虚拟DOM这样的来源之前抓取文本的数据，然后再解决这个领域。为了阻止它这样做，需要在点击字段（真实或模拟）或用户使用某种document.querySelectorAll("span[data-text='true']").forEach(function(element) { element.innerText = element.innerText.replace('Lorem ipsum','Hello world'); });（src）键入后进行更改。

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

1 个答案: