如何使用JavaScript正则表达式删除标签

Question

I have a JavaScript string containing HTML like this:

<div>
 <div class="a">
  content1
 </div>
 content 2
 <div class="a">
  <b>content 3</b>
 </div>
</div>

and I want to remove the div's of class="a" but leave their content. In Python I would use something like:

re.compile('<div class="a">(.*?)</div>', re.DOTALL).sub(r'\1', html)

What is the equivalent using Javascript regular expressions?

Answer 1

Why don't you use proper DOM methods? With a little help from jQuery, that's dead simple:

var contents = $('<div><div class="a">content1</div>content 2<div class="a"><b>content 3</b></div></div>');

contents.find('.a').each(function() {
    $(this).replaceWith($(this).html());
});

Answer 2

You can achieve it with regular expressions in JavaScript

var html = '<div> <div class="a"> content1 </div> <div class="a"> content1 </div> ... </div>';
var result = html.replace(/<div class="a">(.*?)<\/div>/g, function(a,s){return s;});
alert(result);

RegExp method replace takes two parameters - first one is the actual re and the second one is the replacement. Since there is not one but unknown number of replacements then a function can be used.

Answer 3

If you want to do this in Javascript, I'm presuming that you are running it in a web browser, and that the 'javascript string' that you refer to was extracted from the DOM in some way. If both of these case are true, then I'd say that it would be a good idea to use a tried and tested javascript library, such as JQuery (There are others out there, but I don't use them, so can't really comment) JQuery allows you to do on-the-fly DOM manipulations like you describe, with relative ease...

$('div.a').each(function(){$(this).replaceWith($(this).html());});

JQuery is definitely one of those tools that pays dividends - a failry short learning curve and a whole lot of power.