替换浏览器中显示的所有文本答案

【问题标题】：Replace all text that displaying in browser替换浏览器中显示的所有文本
【发布时间】：2012-06-25 09:49:56
【问题描述】：

我想用“@@@@”之类的东西替换所有显示的文本。这意味着用户将看到所有页面都充满了“@@@@”而不是文本（除了图像、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 格式丢失了。

我太累了。有人可以帮我吗？

非常感谢！

【问题讨论】：

in case of elements, tags have child, it would failed:你能解释一下这个案例吗？
您需要替换body.innerHTML 中> 和< 之间的任何内容
@Furqan：如果有子标签，该函数会检查这不是“纯文本”并忽略它们（我展示的示例 HTML）。
@ScottS：在这种情况下：
你好，点击asd.zxc">here</a></p>我的链接会丢失。
@TrungDQ 不，因为您只会在任意两个标签（打开或关闭）之间进行替换。您将检查 > 和 < 符号，不是位于同一父级的开始和结束标记。

标签： javascript jquery html text replace

【解决方案1】：

这段代码似乎对我有用：

$('*').contents().filter(function() {
    return this.nodeType == Node.TEXT_NODE && this.nodeValue.trim() != '';
}).each(function() {
    this.nodeValue = '@@@@';
});

基本上，它将每个 text 节点的内容替换为@@@@。

有关演示，请参见此处：http://jsfiddle.net/K8544/3/

【讨论】：

哦，完美。你赢了。我从来不知道 nodeType。
非常感谢！这几乎适用于页面，我正在尝试这个。谢谢！
如果页面中有<iframe>，这是行不通的。你能解释一下这个案例吗？谢谢！等待您的回复，我已经快成功了。
<iframe>s 在这方面有些特殊。由于我使用的是.contents()，它应该工作，但我不确定为什么它不工作。

【解决方案2】：

试试这个。这是一个用“*”替换内部文本的函数，但前提是它的内部 HTML 等于它的内部文本。否则，它会递归调用自身，向下导航 DOM 直到到达最里面的元素。

    $(document).ready(function() {
        function replaceChildren(node) {
            if ($(node).html() == $(node).text()) $(node).text("@@@@");
            else {
                $(node).children().each(function() {
                    replaceChildren(this);
                });
            }
        }
        replaceChildren($("body"));
    });

它并不完美，但对于大多数用途来说应该非常接近。我在 Stack Overflow 页面上尝试过，大多数文本都被替换了。唯一不起作用的地方是同一标签内有杂散标记和文本，例如

Here is some inner text and markup

。也许这足以满足您的目的......

【讨论】：

这会破坏大部分 OP 的标签。
对不起，我错了。但无论如何，代码在你所说的地方失败了，所以它不是 OP 请求的通用解决方案。

【解决方案3】：

仅 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> 包裹的其他元素。

【讨论】：

@TrungDQ 让我知道这是否是您想要实现的目标。
嗨！抱歉回复晚了。我尝试使用您的代码，但似乎它在几乎页面中不起作用。您的小提琴示例工作正常，但是当我将此代码用于较大的 HTML 页面时，它不起作用。 Blender 的解决方案对我来说很好。无论如何，谢谢你的帮助:)

【解决方案4】：

您可以匹配两个标签之间的任何内容 - 这些标签不必是相同的标签。例如，<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>

（注意：这不会替换空格，因为这似乎会导致一些问题）。

【讨论】：

哦，我明白了。对不起，我太傻了。这会很好用，一开始看起来很复杂，但我认为它比 JQuery 更快。感谢您的帮助！