Check for line breaks in paragraph-CodePudding

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.

CodePudding user response：

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>

CodePudding user response：

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;}

CodePudding user response：

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>

CodePudding user response：

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:

const regex = /(?<=<br>\s*<br>\s*)((<br>\s*)*)/gm;
const paragraph = document.querySelector('p')
paragraph.innerHTML = paragraph.innerHTML.replace(regex, '')

<p>
  Hi!
  <br>
  <br>
  Welcome to StackOverflow!
  <br>
  Thanks!
  <br>
  <br>
  <br>
  <br>
  Bye!
</p>

If wrapping up the text elements in span tags is possible, as epascarello commented, we can simply do this:

p>br br br {
  display: none;
}

<p>
  <span>Hi!</span>
  <br>
  <br>
  <span>Welcome to StackOverflow!</span>
  <br>
  <span>Thanks!</span>
  <br>
  <br>
  <br>
  <br>
  <span>Bye!</span>
</p>