使用纯JavaScript隐藏括号内的内容

Question

I want to use pure JavaScript to hide all content inside brackets in a document. For example, this:

Sometext [info]

would be replaced with this:

Sometext

With jQuery I can do this with:

<script type="text/javascript">
    jQuery(document).ready(function(){
        var replaced = jQuery("body").html().replace(/\[.*\]/g,'');
        jQuery("body").html(replaced);
    });
</script>

Answer 1

The document 's DOMContentLoaded event will fire at the same time as the callback you pass to jQuery(document).ready(...) .

You can access the body of the page through document.body instead of jQuery("body"), and modify the HTML using the .innerHTML property instead of jQuery's .html() method .

document.addEventListener("DOMContentLoaded", function(event) {
    var replaced = document.body.innerHTML.replace(/\[.*\]/g,'');
    document.body.innerHTML = replaced;
});

Answer 2

If you use, document.body.innerHTML to replace, it is going to replace everything between [], even valid ones like input names. So I think what you need is to grab all of the textnodes and then run the regex on them. This question looks like it will do the trick.

function recurse(element)
{
    if (element.childNodes.length > 0) 
        for (var i = 0; i < element.childNodes.length; i++) 
            recurse(element.childNodes[i]);

    if (element.nodeType == Node.TEXT_NODE && /\S/.test(element.nodeValue)){
         element.nodeValue = element.nodeValue.replace(/\[.*\]/g,'');
    }
}

document.addEventListener('DOMContentLoaded', function() {
  // This hits the entire document.
  // var html = document.getElementsByTagName('html')[0];
  // recurse(html);

  // This touches only the elements with a class of 'scanME'
  var nodes = document.getElementsByClassName('scanME');
  for( var i = 0; i < nodes.length; i++) {
    recurse(nodes[i]);
  }
});

Answer 3

您已经有了解决方案，请尝试"Sometext [info]".replace(/\\[.*\\]/g,'');

Answer 4

Basically what your doing is this

document.addEventListener('DOMContentLoaded', function() {
    var replaced = document.body.innerHTML.replace(/\[.*\]/g,'');
    document.body.innerHTML = replaced
});

That would be a silly idea though (speaking for myself)

Make your life easier & your site better by doing something like this

<p> Sometext <span class="tag-variable"> [info] </span> </p>

document.addEventListener('DOMContentLoaded', function(){
    var tags = document.getElementsByClassName('tag-variable');
    for( var i = 0; i < tags.length; i++) {
      var current = tags[i]; // Work with tag here or something
      current.parentNode.removeChild( current );
    }
});