Javascript 正则表达式替换两个标签之间的多行内容（包括标签）

Question

In the string

some text <p id='item_1' class='item'>multiline content\r\n\r\n for <br/>remove</p><br clear='all' id='end_of_item_1'/><p id='item_2' class='item'>another multiline content\r\n\r\n</p><br clear='all' id='end_of_item_2'/>

I need to remove

<p id='item_1' class='item'>multiline content\r\n\r\n for <br/>remove</p><br clear='all' id='end_of_item_1'/>

Can't find a way how to do it.

var id = 'item_1';
var patt=new RegExp("<p id='"+id+"'(.)*|([\S\s]*?)end_of_"+id+"'\/>","g");
var str="some text <p id='item_1' class='item'>multiline content\r\n\r\n for <br/>remove</p><br clear='all' id='end_of_item_1'/><p id='item_2' class='item'>another multiline content\r\n\r\n</p><br clear='all' id='end_of_item_2'/>";
document.write(str.replace(patt,""));

The result is

some text for
<br>
remove
<p></p>
<br id="<p id=" class="item" clear="all" item_2'="">
another multiline content
<p></p>
<br id="end_of_item_2" clear="all">

Please help to solve this.

Answer 1

Why can't you use the DOM API to remove it? (add everything to the document, and then remove what you don't need)

var item1 = document.getElementById('item_1'),
    endOfItem1 = document.getElementById('end_of_item_1');

item1.parentNode.removeChild(item1);
endOfItem1.parentNode.removeChild(endOfItem1);

Answer 2

I need to assume a bit of unspoken constraints from your question, to get this to work:

Am I right in guessing, that you want a regex, that can find (and then replace) any 'p' tag with a specific id, up to a certain tag (like eg a 'br' tag) with an id of 'end_of_[firstid]'?

If that is correct, than the following regex might work for you. It may be, that you need to modify it a bit, to get JS to accept it:

<p\s+id='([a-zA-Z0-9_]+)'.*?id='end_of_\1'\s*\/>

This will give you any constellation with the criteria, describled above, and the name if the id as group 1, It should now be a simple task, to check if group1 contains the id you want to remove and then replace the whole match with an empty string.

If I understand your example correcty (I am not that good with JavaScript and my RegEx was based rather on the general perl-regex fashion) you could maybe do something like the following:

var patt=new RegExp("<p\s+id='"+id+"'.*?id='end_of_"+id+"'\s*\/>","g");

That way, you don't have to worry about group matching, although I find it to be more elegant, to match the id you wanted via a group instead of inserting it into the RegEx.

Answer 3

Here's the regex for the current scenario. When the regex approach eventually breaks, remember that we warned that parsing HTML with regex was a fool's errand. ;)

This:

var s        = "some text <p id='item_1' class='item'>multiline content\r\n\r\n for <br/>remove</p><br clear='all' id='end_of_item_1'/><p id='item_2' class='item'>another multiline content\r\n\r\n</p><br clear='all' id='end_of_item_2'/><ul><li>";
var id       = 'item_1';

var patt     = new RegExp ("<p[^<>]*\\sid=['\"]" + id + "['\"](?:.|\\n|\\r)*<br[^<>]*\\sid=['\"]end_of_" + id + "['\"][^<>]*>", "ig")

var stripped = s.replace (patt, "");

Produces this:

"some text <p id='item_2' class='item'>another multiline content 

</p><br clear='all' id='end_of_item_2'/><ul><li>"