Question

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

我太累了。有人能帮助我吗？

非常感谢！

Answer 1

此代码似乎对我有用：

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

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

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

Answer 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页面上尝试了它，大多数文本都被替换了。它不起作用的唯一地方是同一标签内存在杂散标记和文本，例如＆lt; div＆gt;这是一些内部文本＆lt; strong＆gt;和标记＆lt; / strong＆gt;＆lt; / div＆gt; 。也许这足以满足您的目的......

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

Answer 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>

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

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

4 个答案: