Match .. with multiple new lines

Question

I know a bit about regex in JS but I can't figure out to match the kind of new lines there is in the text I have.

The context is a get() call and want to keep only a part of the result :

$.get( "...", { id: "3", name: name } )
     .done(function( data ) {
          body.append(data.match(/<tr\s+class="hl"\s+>.*<\/tr>/) );
});

So I want to keep only

<tr class="hl" >

        <td class="ras  fc" >3</td>
        <td class="plsa " ><a href="">M</a> </td>
        <td class="lefv " >3</td>
        <td class="xpm  lc" >3</td>
</tr>

From the whole code : Regex ex

Unless you have a very good reason to do this in regex, do not use regex. Use a parser. — Tom Lord, Jul 23 '17 at 18:08
With plain JS, you could achieve this by creating a dummy element and manipulating the DOM. If you're using jQuery, for example, then there are some [shortcuts](https://stackoverflow.com/a/13452959/1954610) you could also take. You have already been provided with one rough approach below; I'd advise you to do some research. In general, [you cannot parse HTML with regex](https://stackoverflow.com/a/1732454/1954610) - so you should aim to use a parser, for anything "non-trivial" like this. — Tom Lord, Jul 24 '17 at 08:42
Ow, i tried "create object jquery" on the net and other way and i can't figure out to find `$(data)` as explain in the post you give, thanks, but in same time regex helped me perfectly — azro, Jul 24 '17 at 08:58
The regex answer will not work properly if you have nested tables, or commented out HTML, or additional whitespace in the `` tags, or additional tag attributes, and so on...... If it works as a "quick fix" for your use case then fair enough, but please be aware that this is *not a "proper" solution*. Your code *will* contain potential bugs, because HTML cannot be fully parsed with a regex. — Tom Lord, Jul 24 '17 at 09:02
I'll try with jquery object, and set in answer if it works ;) — azro, Jul 24 '17 at 09:04

score 1 · Answer 1 · answered Jul 23 '17 at 18:18

1

Also you may try this regex expression:

(<tr class="hl" >)(.|\n)*?<\/tr>

This cheatsheet will be very helpful in your next regex endeavours: http://www.rexegg.com/regex-quickstart.html

answered Jul 23 '17 at 18:18

Bakhtiiar Muzakparov

2,308
2
15
24

Thanks, but use js would be better now ;) – azro Jul 24 '17 at 09:14
`var resultString = stringVariable.match(/()(.|\n)*?<\/tr>/ig)[0];` full statement in js, zero index because `match` returns an array of matches – Bakhtiiar Muzakparov Jul 24 '17 at 10:13
I know, I mean full js, the `stringVariable` comes from html and so it can possibly not work, why you give work I know, but there is another way which is proper and will work everytime even is spaces change – azro Jul 24 '17 at 10:21

score 0 · Answer 2 · answered Jul 23 '17 at 18:19

It's not a particularly elegant solution, but you if you created an element and appended it to the DOM it would be relatively easy to select the node you wanted, something like;

var str = '<table id="hhh" class="row_table_data"><thead><tr><td></td><td>J</td><td>N</td><td>E</td></tr></thead><tbody><tr class="hover"><td class="ras " >2</td><td class="plsa " ><a href="">X</a> </td><td class="lefv " >3</td><td class="xpm lc" >1</td></tr><tr class="hl" ><td class="ras  fc" >3</td><td class="plsa " ><a href="">M</a> </td><td class="lefv " >3</td><td class="xpm  lc" >3</td></tr><tr class="hover"><td class="ras " >4</td><td class="plsa " ><a href="">l</a> </td><td class="lefv " >3</td><td class="xpm " >3</td></tr>';

var el = document.createElement( 'div' );
el.style = "display:none;"
el.innerHTML = str;
document.body.appendChild( el );
var tr = document.querySelector( 'tr.hl' );
console.log( tr.outerHTML );

Anyway, I'm sure you'll get a better solution but just posting this for an alternative / comparison.

score 0 · Accepted Answer · answered Jul 24 '17 at 09:14

As suggested in comment by Tom Lord, use JS to parse the document would be more efficient than use regex on html, in case it would change and for others issues, in fact it only need to use a jquery object :

let tr =  $(data).find('.hl');

And then you can use like any other jquery element :

 tr.find("td:first").remove();                         //remove column
 tr.find("td:last").after("<td>"+(...)+"</td>");       //  add   column

Match .. with multiple new lines

3 Answers3