Catch everything between line break tags

Question

<div class="1" >quero pegar

    AQUI DENTRO PODE TER
    quebra de linha...
    paragrafo...
    espaços
    várias outras tags html...
    qualquer coisa...

</div>

How do I marry this div with regex? Example: https://regexr.com/4c1n0

Answer 1

I used the following regex:

\<div.*\>((.*|\s|\r|\n)*)\<\/div\>/gm

See the example below:

const texto = `<div class="1" >quero pegar

    AQUI DENTRO PODE TER
    quebra de linha...
    paragrafo...
    espaços
    várias outras tags html...
    qualquer coisa...
	<p> Teste </p>

	<p><span> Teste <span> </p>
</div>`;

const regex = /\<div.*\>((.*|\s|\r|\n)*)\<\/div\>/gm;
 

console.log(texto.replace(regex,  '$1'));

See the regex: https://regex101.com/r/KCm86L/1

Answer 2

^{The ideal is to use a parser HTML, as it can handle all possible and valid cases of HTML syntax, which are much more difficult to deal with regex. That said, let’s go to some alternatives...}

---

By default the point does not consider line breaks, therefore <div class="1">.*</div> does not work. An alternative is to use this regex:

<div[^>]*>([\s\S]*?)<\/div>

Shortly after <div we have [^>]*: a sequence of zero or more characters that are not >. Although the point (.*) can work, you better say exactly what you want, since the point may exceed the > and test the characters you have after (and then regex can come back, and do this back and forth several times, until you find a match). Already using [^>] I guarantee she stops when she finds the first >.

Then we have [\s\S]. The shortcut \s (lower case) means "spaces, TAB, line breaks, etc" (the exact list varies according to the language). And \S (capital) means "anything other than \s". That is to say, [\s\S] is "whatever \s or that is not \s", what is another way of saying "any character, including line breaks" (basically a "point turbine").

Next we have the quantifier * (zero or more occurrences). If you want to force the tag to have something inside it, you can exchange it for +. The problem is that they are "greedy" and try to get as many characters as possible. So I use the ? soon after to cancel this behavior (with this, the regex takes as few characters as possible to satisfy it). The difference happens when there is more than one div in the text. Example:

<div class="1" >div1</div>
<div class="1" >div2</div>

If I use <div[^>]*>([\s\S]*)<\/div> (without the ?), regex picks up both Ivs at once, as the * is greedy and picks up as many characters as possible. This causes him to take the two Ivs together, see here.

Putting the ? (that is to say, <div[^>]*>([\s\S]*?)<\/div>), the * stops being greedy and picks up as few characters as possible. With this, he picks up the two Divs separately, see here.

If you do not want to use capture groups, you can switch to regex:

(?<=<div[^>]*>)[\s\S]*?(?=<\/div>)

In this case we use lookbehind and loohahead (the passages with (?<= and (?=). The difference is that they only check if something exists before or after, but these passages are not part of the match (see here). But the lookbehind is a little more inefficient, and not all Engines accept expressions of variable size in one lookbehind (in the case, the [^>]*), then it is probably best to use the first solution, with the capture group.

---

But there is still a problem. If you have a div inside another:

<div class="1">
abc
<div>div interna</div>
xyz
</div>

The above regex only picks up the first </div>, leaving "Xyz" out (see here). And if I take the ? of regex, I return to the previous problem, which is to take several Divs at once (see here).

Then it starts to complicate, and maybe in this case it’s easier to use a parser HTML, because it already handles these cases for you. A regex for this is not impossible, but it is much more complicated, as it would have to use recursive regex:

<div[^>]*>((?:(?R)|(?:(?!<\/?div)[\s\S]))*)<\/div>

The problem is that not all languages and Engines support recursive regex (the chunk with (?R), calling the regex itself recursively). Basically, regex checks whether there are other Ivs or other non-Divs tags inside it, ensuring that you only take what’s inside the outermost div (see here this regex working).

---

Again, evaluate your use cases and see if it’s worth using these expressions (and if the simplest one already fits your cases). In some situations, using regex is acceptable, but depending on how complex your HTML is, one parser is the best option.

A recursive regex above, for example, still lets pass this case:

<div class="1">abc
<!-- 
comentario </div>
-->
xyz
</div>

The regex cannot identify that </div> is within a comment and should be ignored (and as you said that within the div can have "anything", I decided to include this example, even if it is "rare"). With this, the "Xyz" section is left out (see here).

Already one parser HTML can ignore comments without major problems.