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.
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.
// Get all of the nodes in the p element into an array
const nodes = [...document.querySelector("p").childNodes];
// loop over the nodes so we can inspect each one
nodes.reduce((count, node) => {
// Do we have text node?
if(node.nodeType === 3) {
// is the text node just whitespace
const isEmpty = node.nodeValue.trim().length === 0;
// if whitespace ignore
// if text, reset count
return isEmpty ? count : 0;
}
// update the count for number of brs encountered
count++;
// if we are at number 3 or greater remove it
if (count>2) node.remove();
// return the count
return count;
}, 0);<p>
"Text"
<br>
<br>
"Text2"
<br>
<br>
<br>
<br>
"Text3"
</p>And if you have more than one you have to select all the paragraphs and loop over that and process each one.
const paragraphs = document.querySelectorAll("p");
paragraphs.forEach( elem => {
const nodes = [...elem.childNodes];
nodes.reduce((count, node) => {
if(node.nodeType === 3) {
const isEmpty = node.nodeValue.trim().length === 0;
return isEmpty ? count : 0;
}
count++;
if (count>2) node.remove();
return count;
}, 0);
});<p>
"Text"
<br>
<br>
"Text2"
<br>
<br>
<br>
<br>
"Text3"
</p>
<p>
"Text"
<br>
<br>
<br>
<br>
<br>
<br>
"Text2"
<br>
<br>
<br>
<br>
"Text3"
</p>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.
var str = `
<p>
"...."
<br>
<br>
"...."
<br>
<br>
<br>
<br>
</p>`;
var reg = /(?<=<br>\s*<br>\s*)((<br>\s*)+)/gm;
console.log(str.replace(reg, ''));.as-console-wrapper {max-height: 100% !important; top: 0;}You can wrap your text nodes in a span, using the standard find-text-nodes trick, then use .nextUntil to hide the extra nodes:
$("span + br + br").nextUntil("span").hide();
Updated snippet:
$("p")
.contents()
.filter(function() {
return this.nodeType === 3 && this.textContent.trim() != ""; //Node.TEXT_NODE
}).wrap("<span>");
$("span + br + br").nextUntil("span").hide();<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
"Text"
<br>
<br>
"Text2"
<br>
<br>
<br>
<br>
"Text3"
<br>
<br>
<br>
<br>
"Text3"
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
"Text3"
</p>If you don't want to use .nextUntil but are still ok with wrapping the text in a span (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 want span + br, span + br + br
Updated snippet:
$("p")
.contents()
.filter(function() {
return this.nodeType === 3 && this.textContent.trim() != ""; //Node.TEXT_NODE
}).wrap("<span>");
span { color: red; } /* just to show they've been wrapped in a span */
br { display:none; }
p > span + br,
p > span + br + br { display:inline; }<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p>
"Text"
<br>
<br>
"Text2"
<br>
<br>
<br>
<br>
"Text3"
<br>
<br>
<br>
<br>
"Text3"
<br>
<br>
<br>
<br>
<br>
<br>
<br>
<br>
"Text3"
</p>