0

As the title asks I'm searching for a way to target all occurrences of <br><br> in a document so that I can wrap them in a span.

From what I can gather they don't exist as a string so I'm unsure how to target them.

The end goal is to take something like this:

Hello my name is Neil.<br><br>How are you?

And make it into something like this:

Hello my name is Neil.<span style="line-height:14px;"><br><br></span>How are you?
  • This may help: https://stackoverflow.com/questions/3337587/wrapping-a-set-of-dom-elements-using-javascript/13169465#13169465 – Blake F. Nov 13 '18 at 15:41
  • 3
    Couldn't you use css rule instead? `br{line-height:14px;}`? – charlietfl Nov 13 '18 at 15:41
  • Why wrap them in a span ? maybe there is another solution for your problem – Mihai T Nov 13 '18 at 15:48
  • You don't need to wrap `br` elements in a `span` just to set `line-height` on them, do it directly in CSS – Rory McCrossan Nov 13 '18 at 15:51
  • @charlietfl @rorymccrossan the OP is probably confronted to an existing content where `

    ` is legion and he wants to treat only this case without changing anything to the existing single `
    ` tags.     – Laurent S. Nov 13 '18 at 16:06

2 Answers2

1

You can do this, but it'll wrap single <br> elements as well:

$("br").wrapAll('<span style="line-height:14px" />');

If you're only setting line-height or other similar styles you may just want to use your styles instead:

br {
  line-height: 14px;
}

/* Hide second line-break */
br + br {
  display: none;
}
coreyward
  • 77,547
  • 20
  • 137
  • 166
  • I like the CSS approach of this answer. Main issue is the functional goal of OP is unclear, but depending on the needs this approach might be the best and most elegant one (besides rewriting content to be semantic...). – Laurent S. Nov 13 '18 at 16:08
1

I won't discuss the premise although I'm quite sure there are more elegant ways of doing what you actually want to do. This should do the trick:

document.body.outerHTML = document.body.outerHTML.replace(/<br><br>/gi, '<span style="line-height:14px;"><br><br></span>')
<div>
This is a test <br><br> and it's working
</div>

Addition following the comment of charlietfl: Note that one of the caveat of this is that it would just drop all event listeners on the content being replaced like this, because you're actually dropping all elements of the dom and rebuilding a new one. A workaround to this issue would be to do this replacement before any other binding. Another workaround would be limit the scope of this replacement: right now it occurs on the whole body, but you could be more accurately targeting paragraphs, or paragraphs with a certain class.

I also used this edit to make the regex match case insensitive so that <BR><BR> is treated as <br><br> or whatever camel case you would be using...

Laurent S.
  • 6,816
  • 2
  • 28
  • 40
  • 2
    Caveat would be it will remove all existing event listeners – charlietfl Nov 13 '18 at 15:54
  • This also re-invokes the document parser, layout engine, and repaints the entire page. On a mid-tier device with a moderately complex page that could cost you several seconds for a small visual change that can be addressed in another manner. – coreyward Nov 13 '18 at 17:14