Wie erstelle ich ein Bookmarklet, um den gesamten Text einer Website zu einem anderen Text ähnlicher Länge zu ändern?

Question

Ich möchte ein JavaScript-Bookmarklet erstellen, das den gesamten Text einer Website (oder den meisten Text auf den meisten Websites) mit einer anderen Zeichenfolge ähnlicher Länge austauscht, während die Formatierung der Site beibehalten wird.

Denken Sie, den ganzen Text auf nytimes.com durch "Lorem Ipsum" Füllertext zu ersetzen, ohne die Länge des Textes bedeutsam zu ändern.

Der Code sollte in der Lage sein, als Bookmarklet, sondern auch als einbindbare Schaltfläche zu arbeiten.

Inhalt wie folgt aus:

<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> 

würde in diese geändert werden:

<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> 

Der Text, der verwendet wird, um den ursprünglichen Inhalt zu ersetzen, würde vorgegeben werden.

Ich bin ein Javascript-Neuling und ich hätte gerne einige Hinweise auf Techniken, die mir dabei helfen würden, dies zu erreichen. Vielleicht gibt es bereits existierende Lösungen, die ich noch nicht gefunden habe, weil ich nicht die richtige Terminologie für die Suche habe.

Ich bin dankbar für alle Hinweise und freue mich, Sachen für mich selbst herauszufinden.

Answer 1

Sie haben wahrscheinlich nicht genügend Platz im Bookmarklet, um den Lorem Ipsum als String-Literal einzubeziehen. Ich würde vorschlagen, den Lorem Ipsum in einer txt-Datei auf einem Server zu speichern und ihn dann mit Ajax anzufordern. Wenn die Antwort kommt, speichern Sie sie in einer String-Variablen s und initialisieren Sie eine Ganzzahl , wir werden sie verwenden, um durch diese Zeichenfolge zu iterieren.

Dann durchlaufen Sie den DOM-Baum der Webseite. Wenn Sie auf einen Textknoten stoßen, gehen Sie folgendermaßen vor: Messen Sie seine Länge (wir nennen sie len). Dann ersetzen Sie den Text in diesem Knoten mit s.slice(i, i + len), was genau len Zeichen aus dem Lorem Ipsum in der Zeichenfolge s gespeichert ist. Daher wird der Text durch einen Teil von Lorem Ipsum gleicher Länge ersetzt. Erhöhen Sie abschließend den Iterator: , weil wir nicht jeden Textknoten durch den gleichen Teil ersetzen wollen.

Immer wenn is.length überschreitet, reinitialisieren Sie es einfach auf 0.

Das Verfolgen des DOM-Baums kann mit einer rekursiven Funktion implementiert werden. Nennen wir es traverse(element). Die Funktion würde prüfen, ob der element Text enthält - falls ja, ersetzen Sie ihn durch Lorem Ipsum. Dann iterieren Sie in einem for-Zyklus durch alle element Kinder (wenn es welche hat) und rufen Sie traverse() für jeden von ihnen. Mit traverse() Funktion rekursiv wie diese implementiert, werden Sie es nur haben einmal zu nennen: traverse(document.body);

Schließlich, wenn Sie einige Tutorials benötigen:

AJAX Grundlagen: http://www.w3schools.com/ajax/default.asp (und die folgenden Kapitel)

Baum DOM : http://www.w3schools.com/htmldom/default.asp (und folgende Kapitel)

Answer 2

Es gibt eine bookmarklet that replaces all the text on the page with Lorem Ipsum. Dies könnte Ihr Problem lösen oder Sie könnten diesen Ansatz Ihren eigenen Bedürfnissen anpassen.