Check for line breaks in paragraph

Question

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.

Are you wanting a JavaScript solution, or a CSS solution? You example is using CSS. — pwbred, Sep 21 '22 at 18:06
Please provide enough code so others can better understand or reproduce the problem. — Community, Sep 21 '22 at 18:10
@pwbred Actually I don't think CSS can achieve this goal. Though there is `+` selector, it doesn't take text nodes between elements into consideration. — Wilderness Ranger, Sep 21 '22 at 18:11
@MarvinBlach But `+` *can* work, if you could wrap the text into something like `` respectively. — Wilderness Ranger, Sep 21 '22 at 18:14
@WildernessRanger can you go a bit more into detail how that could work please? — Marvin Blach, Sep 21 '22 at 18:20
it's not easy in JS either, consider this: https://jsfiddle.net/2qwvxe4k/ it lists your sequence correctly because html markup is written all in one line. When code is indented, results are different: https://jsfiddle.net/oa16gwne/ — GrafiCode, Sep 21 '22 at 18:33
Yeah, I've been trying to do that for the past 30 minutes lol.. but I think it'd be easier if you can convert those text snippets into an element like spans. Is that in your power or not? — technophyle, Sep 21 '22 at 18:33
If it would have been `Text 2` it should have been something like `br + br + br { display: none; }` — epascarello, Sep 21 '22 at 18:43
@MarvinBlach If you wrap each line's text into an element, then you can use a rule like `br + br + br { display: none; }` to hide redundant breaks. — Wilderness Ranger, Sep 22 '22 at 02:55

epascarello · Accepted Answer · 2022-09-21T19:08:10.287

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>

This is the error I am getting: Uncaught TypeError: Cannot read properties of null (reading 'childNodes') :/ — Marvin Blach, Sep 21 '22 at 19:07
You are either reading element before it exists or your selector is wrong. — epascarello, Sep 21 '22 at 19:08
I am struggling to make this run only on mobile devices. Can you help me out @epascarello? I tried the following: if( screen.width <= 480 ) { 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); }); } — Marvin Blach, Sep 22 '22 at 07:29

IT goldman · Answer 2 · 2022-09-21T18:56:32.677

1

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

edited Sep 21 '22 at 18:56

answered Sep 21 '22 at 18:36

IT goldman

14,885
2
14
28

And then there's this answer: https://stackoverflow.com/a/1732454/3930247 – technophyle Sep 21 '22 at 18:38
But I agree, this would probably be the best answer. – technophyle Sep 21 '22 at 18:40
1

Technically yes. This solution only supports `
` tags exactly written like that. Another possibility is using DOM or DOMParser to parse the nodes of the element and manipulate that. – IT goldman Sep 21 '22 at 18:44
Thank you for the answer. How do I make it work for EVERY paragraph, not just this example? :) – Marvin Blach Sep 21 '22 at 18:46

freedomn-m · Answer 3 · 2022-09-21T19:18:17.457

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>

technophyle · Answer 4 · 2022-09-21T18:56:36.470

0

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>

edited Sep 21 '22 at 18:56

answered Sep 21 '22 at 18:45

technophyle

7,972
6
29
50

Hi, I am getting this error message here: Uncaught SyntaxError: Identifier 'regex' has already been declared. Do you know what I can do about that, but your solution is exactly what I need. – Marvin Blach Sep 21 '22 at 18:52
Maybe just change the name to something else "regEx" for example. – technophyle Sep 21 '22 at 18:53
When I do that I am getting this error here, that is pretty strange: Uncaught SyntaxError: Unexpected token '<' – Marvin Blach Sep 21 '22 at 18:59
Do you know where that error happens? – technophyle Sep 21 '22 at 19:01
I just pasted it in the console. – Marvin Blach Sep 21 '22 at 19:05
You can't paste the HTML code in the console and expect it to work. HTML is not JavaScript. – technophyle Sep 21 '22 at 19:06
I mean, did you just paste the JS? – technophyle Sep 21 '22 at 19:09
First I had it in the body, but that didnt work either :/ I put it into script tags. – Marvin Blach Sep 21 '22 at 19:11
If your code has no other syntax error, and you put the three lines of code into a script tag (whether it's head or body), I'm pretty sure it'll work. – technophyle Sep 21 '22 at 19:12

Check for line breaks in paragraph

4 Answers4