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

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

javascript jquery html text replace

Javascript 替换浏览器中显示的所有文本,javascript,jquery,html,text,replace,Javascript,Jquery,Html,Text,Replace,我想用类似“@@@”的内容替换所有显示的文本。这意味着用户将看到所有页面都充满了“@@@@”而不是文本（除了图像、iframe或页面HTML代码中不存在的内容）这几乎取代了页面的html代码，但对标记和代码没有影响，只对显示给用户的文本有影响例如，我想替换此页面中的所有文本： <!DOCTYPE html> <html> <body> <ul class="topnav"> <li>Ite

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



项目1
项目2
嵌套项目1
嵌套项目2
嵌套项目3


项目3

第一组
第二组
跨度
用户名
密码

记住密码

点击这里

结果应该是：

<!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 = '@@@@';
});

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

@@@

有关演示，请参见此处：

试试这个。它是一个用“*”替换内部文本的函数，但前提是其内部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();

$（“body*”）.contents（）.wrap（“”）； $（“模糊”）.each（函数（i，e）{if（$（e）.children（）.length==0）$（e）.replaceWith（“@@@@”）；}); $（“模糊>*”）.unwrap（）；

此代码使用自定义标记（
隐藏
）包装每个节点；使用
.contents（）
确保我们也包装纯文本节点。然后我们用@@@替换没有子节点（以前是纯文本节点）的
模糊
节点，因此也消除了
模糊
标记。
最后，我们打开用
包装的其他元素，您可以匹配两个标记之间的任何内容-它们不必是同一个标记。例如，
aaa
，它将查找
aaa
，将其替换为
@@@code>，然后查找ccc-dd ，并将其替换为@@@code> 和下一个如果元素、标记有子标记，它将失败：您能解释一下这种情况吗？您需要替换和@Furqan之间的任何内容：如果有子标记，函数将检查是否为“纯文本”并忽略它们（我展示的示例HTML）@ScottS:在这种情况下：您好，单击此处我的链接将丢失。@TrungDQ否，因为您只会在任意两个标记之间替换（打开或关闭）。你会检查和哦，太好了。你赢了。我从来都不知道nodeType。非常感谢！这个页面几乎可以使用，我正在尝试这个。谢谢！如果页面中有，这就不起作用了。你能解释一下这个案例吗？谢谢！等待你的回复，我几乎成功了。的在这方面有些特殊。因为我使用的是.contents（），它应该能工作，但我不确定为什么不能。这会破坏OP的大部分标记。对不起，我错了。但不管怎样，代码在你说的地方失败了，所以它不是OP请求的一般解决方案。@TrungDQ让我知道这是否是你想要实现的。嗨！很抱歉回复太晚。我尝试过使用你的代码，但看起来很像在几乎所有页面中都不起作用。您的fiddle示例很好，但当我将此代码用于更大的HTML页面时，它不起作用。Blender的解决方案对我来说很好。无论如何，感谢您的帮助：）哦，我明白了。对不起，我太傻了。这将非常有效，一开始看起来相当复杂，但我认为它比JQuery更快。谢谢你的帮助！ <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>