Menu
I want to replace all displaying text with something like "@@@@". It mean user will see all the page is full of "@@@@" instead of texts (except image, iframe or something doesn't exists in the page's HTML code).
This almost replace the html code of the page, but not effect to the tags and codes, just the text that display to user.
For example, I want to replace all the text in this page:
<!DOCTYPE html>
<html>
<body>
<ul class="topnav">
<li>Item 1</li>
<li>Item 2
<ul><li>Nested item 1</li><li>Nested item 2</li><li>Nested item 3</li></ul>
</li>
<li>Item 3</li>
</ul>
<div>DIV1</div>
<div>DIV2</div>
<span>SPAN</span>
<table>
<tr>
<td>Username</td>
</tr>
<tr>
<td>Password</td>
</tr>
</table>
<p>
<input type="checkbox" name="remember" tabindex=3 />
<label for="checkbox">Remember <strong>password</strong></label>
</p>
<p>Click here to <a href='register.php'>Register</a></p>
</body>
</html>
And the result should be:
<!DOCTYPE html>
<html>
<body>
<ul class="topnav">
<li>@@@@</li>
<li>@@@@
<ul><li>@@@@</li><li>@@@@</li><li>@@@@</li></ul>
</li>
<li>@@@@</li>
</ul>
<div>@@@@</div>
<div>@@@@</div>
<span>@@@@</span>
<table>
<tr>
<td>@@@@</td>
</tr>
<tr>
<td>@@@@</td>
</tr>
</table>
<p>
<input type="checkbox" name="remember" tabindex=3 />
<label for="checkbox">@@@@<strong>@@@@</strong></label>
</p>
<p>@@@@<a href='register.php'>@@@@</a></p>
</body>
</html>
Some I've been tried:
Use JQuery to replace all the elements, tags (and it's child) that only contain plain text, this works fine at the beginning:
<ul class="topnav">
<li>@@@@</li>
<li>@@@@
<ul><li>@@@@</li><li>@@@@</li><li>@@@@</li></ul>
</li>
<li>@@@@</li>
</ul>
<div>@@@@</div>
<div>@@@@</div>
<span>@@@@</span>
But lately I realized that in case of elements, tags have child, it would failed:
<p>
<input type="checkbox" name="remember" tabindex=3 />
<label for="checkbox">Remember <strong>password</strong></label>
</p>
<p>Click here to <a href='register.php'>Register</a></p>
So I tried another way, using document.body.innerText to select all the text, but the HTML format is lost.
I was so tired. Can someone help me?
Thanks a lot!
341
This code seems to work for me:
$('*').contents().filter(function() {
return this.nodeType == Node.TEXT_NODE && this.nodeValue.trim() != '';
}).each(function() {
this.nodeValue = '@@@@';
});
Basically, it replaces the contents of each text node with @@@@.
For a demo, see here: http://jsfiddle.net/K8544/3/
180
Try this one. It's a function that replaces inner text with "*", but only if its inner HTML is equal to its inner text. Otherwise, it calls itself recursively, navigating down the DOM until it reaches the innermost element.
$(document).ready(function() {
function replaceChildren(node) {
if ($(node).html() == $(node).text()) $(node).text("@@@@");
else {
$(node).children().each(function() {
replaceChildren(this);
});
}
}
replaceChildren($("body"));
});
It's not perfect, but should be pretty close for most purposes. I tried it on a Stack Overflow page, and most text got replaced. The only place it doesn't work is where there is stray markup and text within the same tag, for example <div>Here is some inner text <strong>and markup</strong></div>. Maybe this suffices for your purpose though ...
28
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
