I'd like to create a javascript bookmarklet that exchanges all text on any website (or most text on most websites) to a different string of similar length while maintaining the formatting of the site.
Think replacing all text on nytimes.com with "Lorem Ipsum" filler-text without significally changing the length of the text.
The code should be able to work as a bookmarklet, but also as an embeddable button.
Content like this:
<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>
would be changed into this:
<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>
The text that is used to replace the original content would be predefined.
I am a Javascript novice and I would like some pointers towards techniques that would help me achieve this. Maybe there are pre existing solutions that I haven't found yet because I do not have the terminology to search correctly.
I am thankful for any pointers and happy to figure stuff out for myself.
You probably don't have enough space in the bookmarklet to include the Lorem Ipsum as a string literal. I would suggest storing the Lorem Ipsum in a txt file on some server, then requesting it with Ajax. When the reply comes, store it in a string variable s and initialize an integer i = 0, we will use it to iterate through that string.
Then, traverse the DOM tree of the webpage. Whenever you encounter a text node, do the following: Measure its length (we'll call it len). Then replace the text in that node with s.slice(i, i + len), what is exactly len characters from the Lorem Ipsum stored in the string s. Therefore, the text is replaced with a portion of Lorem Ipsum of the same length. Finally, increment the iterator: i += len, because we don't want to replace every text node with the same portion.
Whenever i exceeds s.length, just reinitialize it to 0.
Traversing the DOM tree can be implemented with a recursive function. Let's call it traverse(element). The function would check if the element contains text - if yes, replace it with Lorem Ipsum. Then iterate in a for-cycle through all the element's children (if it has any) and call traverse() for each of them. With traverse() function implemented recursively like this, you'll only have to call it once: traverse(document.body);
Finally, if you need some tutorials:
AJAX basics: http://www.w3schools.com/ajax/default.asp (and following chapters)
DOM tree: http://www.w3schools.com/htmldom/default.asp (and following chapters)