this is my setup, the solution can be in JS or CSS:
<p>
"Text"
<br>
<br>
"Text2"
<br>
<br>
<br> -> should be hidden
<br> -> should be hidden
"Text3"
</p>
I want to check every paragraph for br, if there are more than 2 br DIRECTLY following each other, then I want to hide every br (in that break section) except for the first and second br.
In other words: There is a paragraph. This p contains text, followed by two breaks – thats okay. Then there is more text in the same p, this time followed by 3 breaks. That is not okay, because the 3rd break should be hidden there. There could be more text with breaks following after that.
So in this example only the last two breaks should be hidden. Targeting the childs is not working, because then only the first and second breaks are visible but every break after that is hidden.
4
Answers
Let’s try with regexp. I was thinking along the line of
/<br>s*<br>s*((<br>s*)*)/
Then I looked up for negative lookbehind something. It seems to be working.
Using RegEx for processing HTML is generally not recommended but in this case, I think it’s the only answer.
According to the other answer and using JS:
If wrapping up the text elements in
span
tags is possible, as epascarello commented, we can simply do this:Assuming you are just going to have BR and text nodes, you can select all the children and loop over them and count the occurrences of the BR tag. If you are over 2, start removing.
And if you have more than one you have to select all the paragraphs and loop over that and process each one.
You can wrap your text nodes in a span, using the standard find-text-nodes trick, then use
.nextUntil
to hide the extra nodes:Updated snippet:
If you don’t want to use
.nextUntil
but are still ok with wrapping the text in aspan
(or can change the HTML to wrap the text in a span), then you can also use css:Hide all
<br>
, then show the ones you wantspan + br, span + br + br
Updated snippet: