Hide content inside brackets using pure 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>

score 2 · Answer 1 · answered Jul 18 '13 at 14:25

2

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;
});

answered Jul 18 '13 at 14:25

Jeremy

1
85
340
366

this is the nuclear option, it is going to remove any and all [] including valid ones, like the ones found in input names. See my answer for something that only hits the text nodes. – miah Jul 18 '13 at 14:40
This yes it works. And i defentely will pick up this answer. But what if i want this to work only for a with class="scanME"? – Andrei Jul 18 '13 at 14:40
`var cells = document.querySelectorAll('td.scanME')` will look up those elements for you, but unlike jQuery the standard JavaScript DOM API won't let you modify all of those elements at once. You would need to write a `for (var i = 0; i < cells.length; i++)` loop to modify each `cells[i]` in the same way as `document.body` was modified. – Jeremy Jul 18 '13 at 14:46

score 1 · Accepted Answer · edited May 23 '17 at 10:25

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]);
  }
});

@Andrei Edited so that it works, and added code so that it only hits specific nodes, instead of everything in the document. — miah, Jul 18 '13 at 15:06

score 0 · Answer 3 · answered Jul 18 '13 at 14:24

0

You already have the solution, try "Sometext [info]".replace(/\[.*\]/g,'');

answered Jul 18 '13 at 14:24

Marcelo

2,232
3
22
31

Well Sometext [info] is an example. Insted of it can be anything – Andrei Jul 18 '13 at 14:25
I know, I just continued with your example :) – Marcelo Jul 18 '13 at 14:28

iConnor · Answer 4 · 2013-07-18T14:32:54.803

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 );
    }
});

Hide content inside brackets using pure JavaScript

4 Answers4