替换浏览器中显示的所有文本 [英] Replace all text that displaying in browser
问题描述
我想用"@@@@"之类的东西替换所有显示的文本.这意味着用户将看到所有页面都充满了"@@@@"而不是文本(图像，iframe或页面的HTML代码中不存在的东西除外).
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).
这几乎代替了页面的html代码，但对标签和代码没有影响，只是对用户显示的文本无效.
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>
结果应该是:
<!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>
我已经尝试过一些:
使用JQuery替换仅包含纯文本的所有元素，标签(及其子元素)，在开始时效果很好:
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>
所以我尝试了另一种方法，使用document.body.innerText选择所有文本，但是HTML格式丢失了.
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?
非常感谢！
推荐答案
此代码似乎对我有用:
$('*').contents().filter(function() {
return this.nodeType == Node.TEXT_NODE && this.nodeValue.trim() != '';
}).each(function() {
this.nodeValue = '@@@@';
});
基本上，它将每个 text 节点的内容替换为@@@@.
Basically, it replaces the contents of each text node with @@@@.
有关演示，请参见此处: http://jsfiddle.net/K8544/3/
For a demo, see here: http://jsfiddle.net/K8544/3/
这篇关于替换浏览器中显示的所有文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
