如何創建小書籤將網站上的所有文本更改爲其他類似長度的文本？

Question

我想創建一個JavaScript書籤，它將任何網站上的所有文本（或大多數網站上的大多數文本）交換到具有相似長度的不同字符串，同時保持網站的格式。

想替換爲「Lorem存有」填料的文本上nytimes.com所有文本，而不significally改變所述文本的長度。

該代碼應該能夠作爲一個書籤工作，但也可以作爲一個可嵌入的按鈕。

內容是這樣的：

<h2>Police Are Using Phone Tracking as a Routine Tool</h2> 
<p class="author">By <span class="name">Eric Lichtblau</span></p> 
<p>Law enforcement tracking of cellphones is a convenient surveillance tool in many situations, but it is unclear if using such technology without a warrant violates the Constitution.</p> 

會變成這樣：

<h2>Lorem ipsum dolor sit amet, consectetur adipisicing</h2> 
<p class="author">Sed <span class="name">Consectetur Adipisicing</span></p> 
<p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat. Duis aute irure dolor in reprehenderit in voluptate velit.</p> 

用來代替原來的內容文本將被預定義。

我是一個Javascript新手，我希望能夠幫助我實現這一點的技術的一些指針。也許有現有的解決方案，我還沒有找到，因爲我沒有正確的搜索術語。

我很感謝任何指針，並樂意爲自己弄點東西。

Answer 1

你可能沒有在書籤足夠的空間，包括Lorem存有作爲一個字符串。我建議將Lorem Ipsum存儲在某個服務器上的txt文件中，然後用Ajax請求它。當答覆出現時，將其存儲在字符串變量s中並初始化一個整數i = 0，我們將使用它來遍歷該字符串。

然後遍歷網頁的DOM樹。每當遇到文本節點時，請執行以下操作：測量其長度（我們將其稱爲len）。然後將該節點中的文本替換爲s.slice(i, i + len)，存儲在字符串s中的Lorem Ipsum中的字符究竟是len。因此，文本被替換爲相同長度的Lorem Ipsum的一部分。最後，遞增迭代器：i += len，因爲我們不想用相同的部分替換每個文本節點。

每當i超過s.length時，只需將其重新初始化爲0即可。

遍歷DOM樹可以用遞歸函數實現。我們稱之爲traverse(element)。該函數將檢查element是否包含文本 - 如果是，請將其替換爲Lorem Ipsum。然後遍歷所有element的孩子（如果有的話）的for循環，併爲每個孩子調用traverse()。隨着traverse()功能實現遞歸這樣，你只需要調用一次：traverse(document.body);

最後，如果你需要一些教程：

AJAX基礎：http://www.w3schools.com/ajax/default.asp（和後面的章節）

DOM樹：http://www.w3schools.com/htmldom/default.asp（和後面的章節）

Answer 2

有一個bookmarklet that replaces all the text on the page with Lorem Ipsum。這可能會解決您的問題，或者您可以調整這種方法以適應您的需求。