我想将所有显示的文本替换为"@@@@"之类的内容。这意味着用户将看到所有页面都充满了"@@@@"而不是文本(除了图像,iframe或页面HTML代码中不存在的某些内容)。
这几乎取代了页面的html代码,但不影响标签和代码,只是显示给用户的文本。
例如,我想替换此页面中的所有文本:
<!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 替换所有只包含纯文本的元素、标签(及其子标签),这在开始时工作正常:
<ul class="topnav">
<li>@@@@</li>
<li>@@@@
<ul><li>@@@@</li><li>@@@@</li><li>@@@@</li></ul>
</li>
<li>@@@@</li>
</ul>
<div>@@@@</div>
<div>@@@@</div>
<span>@@@@</span>
但是最近我意识到,在元素的情况下,标签有子级,它会失败:
<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 格式丢失了。
我太累了。有人可以帮助我吗?
多谢!
这段代码似乎对我有用:
$('*').contents().filter(function() {
return this.nodeType == Node.TEXT_NODE && this.nodeValue.trim() != '';
}).each(function() {
this.nodeValue = '@@@@';
});
基本上,它将每个文本节点的内容替换为 @@@@
.
有关演示,请参阅此处:http://jsfiddle.net/K8544/3/
试试这个。 这是一个用"*"替换内部文本的函数,但前提是其内部 HTML 等于其内部文本。 否则,它会递归地调用自己,向下导航 DOM,直到到达最里面的元素。
$(document).ready(function() {
function replaceChildren(node) {
if ($(node).html() == $(node).text()) $(node).text("@@@@");
else {
$(node).children().each(function() {
replaceChildren(this);
});
}
}
replaceChildren($("body"));
});
它并不完美,但对于大多数目的来说应该非常接近。 我在堆栈溢出页面上尝试了它,大多数文本都被替换了。 它唯一不起作用的地方是同一标签中有杂散标记和文本的地方,例如
一个仅限 JQuery 的解决方案:
$("body *").contents().wrap("<obscure></obscure>");
$("obscure").each(function(i,e) {if ($(e).children().length==0) $(e).replaceWith("@@@@");});
$("obscure > *").unwrap();
http://jsfiddle.net/cranio/CW9jY/1/
这段代码用自定义标签(obscure
)包装每个节点;使用.contents()
确保我们也包装纯文本节点。然后,我们将没有子节点(以前是纯文本节点)的obscure
节点替换为@@@,从而也消除了obscure
标签。最后,我们解开用 <obscure>
包装的其他元素。
您可以匹配两个标签之间的任何内容 - 这些标签不必是同一个标签。例如,<div>aaa<a href="bbb">ccc dd</a></div>
,它会找到aaa
,用@@@
替换它,然后找到ccc dd
并通过在>
和下一个<
之间查找来将其替换为@@@ @@
。
<script type="text/javascript">
function obscure() {
var newhtml = document.body.innerHTML.split("<");
for (var i=1; i<newhtml.length; i++) {
var list = newhtml[i].split(">");
newhtml[i] = (list[0]) + ">" + ((list[1]).replace(/[^@s]/gim, "@"));
}
newhtml[0] = (newhtml[0].replace(/[^@s]/gim, "@"));
document.body.innerHTML = newhtml.join("<");
}
</script>
(注意:这不会取代空格,因为这似乎会导致一些问题)。