JavaScript.replace(), To Remove Tag and Contents

Question

i have a tag with some veriable content inside. i would like to be able to remove that tag and all its contents using a javascript srt.replace().

i would usually use something like jQuery('.tag-class').remove() but jQuery isn't an option in this case.

i believe a regular expression is what i am looking for but after poking around for quite some time, i am no closer than when i started.

i need to do this.

var myContent = 'bla bla bla <div class="remove-me">variable content here</div> something something';
// run some cool replace() here and get
// bla bla bla  something something

any suggestions would be great!

one thing to add... this content lives within a content editor, that may take liberties with the tags... like adding its own identifiers to the div in question. so '
' may also be '
'. — 100pwd, Nov 11 '12 at 22:45
then why not add it to the question instead of posting it as a comment? — Martin Ender, Nov 11 '12 at 22:45
Parsing HTML with regular expressions is [widely regarded as a bad idea.](http://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags). There are some [other options](http://stackoverflow.com/questions/4247838/best-way-to-parse-html-in-javascript) you might want to take a look at. Specifically [this answer](http://stackoverflow.com/a/4247923/558021). — Lix, Nov 11 '12 at 22:47
There is a [little edit link](http://i.imgur.com/tYHyY.png) in the bottom left corner of your question. You can use it to add more info to your post. — Lix, Nov 11 '12 at 22:48
@100pwd: Why is jQuery not an option? Especially as they are *elements* in a content editor, DOM methods should be preferred to html-string-processing. — Bergi, Nov 11 '12 at 22:59

Andreas Louv · Answer 1 · 2012-11-11T22:53:03.817

If the senario is like this, you can simply use vanilla JavaScript DOM modification:

HTML:

<div id="abc">bla bla bla <div class="remove-me">variable content here</div> something something</div>

JavaScript:

var container = document.getElementById("abc"),
    items = container.getElementsByClassName("remove-me"),
    i = 0,
    len = items.length;

for( ; i < len; i++ ) {
    items[i].parentNode.removeChild(items[i]);
}

Or if you want to strip all HTML tags:

var container = document.getElementById("abc");

container.innerHTML = container.innerHTML.replace(/(<([^>]+)>)/ig,"");

RobG · Answer 2 · 2012-11-11T23:41:48.233

Don't use a regular expression to modify HTML.

HTML is designed to be parsed by a parser, regular expressions are not (by themselves) good at parsing document markup. Better to insert the HTML as the innerHTML of a DIV or similar element, then use DOM methods to modify the content.

You can then inset the content of the DIV into the document as nodes, or get the innerHTML and insert that.

e.g.

function removeElementsFromMarkup(markup, selector) {
  var el = document.createElement('div');
  el.innerHTML = markup;
  var nodes = el.querySelectorAll(selector);

  for (var i=0, iLen=nodes.length; i<iLen; i++) {
    node = nodes[i]
    if (node.parentNode) {
      node.parentNode.removeChild(node);
    }
  }
  return el.innerHTML;
}


alert( removeElementsFromMarkup(
  '<div>foo<div class="remove-me">bar</div></div>', '.remove-me') // <div>foo</div>
);

The above uses querySelectorAll, but you should use whatever selection method will suit. Go for lowest common denominator (e.g. getElementsByTagName) if that will do the job.

If you show a real example of what you are trying to do, you'll get more specific (and probably more useful) answers.

score 1 · Accepted Answer · edited Nov 08 '18 at 12:30

1

var myContent = 'bla bla bla <div class="remove-me">variable content here</div> something something';
myContent = myContent.replace(/<div[\s\w"\=-]*class="remove-me"[\s\w"\=-]*>[\s\w]*<\/div>/g, "");
alert(myContent);

https://jsfiddle.net/umL1tswn/

edited Nov 08 '18 at 12:30

busytraining

723
8
14

answered Nov 11 '12 at 23:03

David

302
2
12

This will work only if you do not have imbricated div elements. If you have them, regular expressions will not be enough for this – David Nov 11 '12 at 23:04
1

i made one simple edit to your code above and it worked like a charm... you had [\s\w"\=-]* in-between things and i swapped it out for [^>]*. thanks a bunch! – 100pwd Nov 12 '12 at 19:43

JavaScript.replace(), To Remove Tag and Contents

3 Answers3