使用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的虛擬DOM這樣的來源之前抓取文本的數據，然后再解決這個領域。 為了阻止它這樣做，需要在單擊字段（真實或模擬）之后或者當用戶使用某種MutationObserver （ src ）鍵入時進行更改。