Home/ Questions/Q 8148877
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-06T14:43:57+00:00

I want to replace all displaying text with something like @@@@. It mean user

  • 0

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).

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>

And the result should be:

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

Some I’ve been tried:

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>

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?

Thanks a lot!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This code seems to work for me:

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

    Basically, it replaces the contents of each text node with @@@@.

    For a demo, see here: http://jsfiddle.net/K8544/3/

    • 0