DEV Community

How to normalize (join together) bold nodes in HTML DOM?

Arnav Bansal on September 01, 2019

I'm building a contenteditable editor which involves multiple rows of contenteditable divs

I want to turn this:

Lorem <b>Ipsum</b><b> Dolor</b> Sit Amet

into this:

Lorem <b>Ipsum Dolor</b> Sit Amet

Collapse
 
6temes profile image
Daniel

Using Regex to parse and manipulate HTML is a recipe for disaster. There are too many edge cases you have to account for.

If you really want to "optimize" the HTML, you may end up having to parse HTML into some kind of AST and work from there. But this is probably more complex than the editor itself you want to build.

Collapse
 
pulljosh profile image
Josh Pullen

But parsing html with regex is fun...

Collapse
 
6temes profile image
Daniel

Not as much as having dinner at home. ;)

Collapse
 
delixx profile image
DeLiXx • Edited

Simply remove any occurence of "</b><b>":

"Lorem <b>Ipsum</b><b> Dolor</b> Sit Amet".replace("</b><b>", "")

Collapse
 
jwkicklighter profile image
Jordan Kicklighter

Would be good to do this in a regex that also looks for whitespace between the two tags.

Collapse
 
delixx profile image
DeLiXx

I thought about that as well, but then you'd change the content (if only ever so slightly) for a trivial QoL improvement

Thread Thread
 
jwkicklighter profile image
Jordan Kicklighter

If you use a capture group, you could put every bit of whitepace back.

Collapse
 
adam_cyclones profile image
Adam Crockett 🌀

Regardless of the Element, are you always going to see two elements together? More importantly what is the implications of not doing as you propose. If you can do no work that's counterintuitively better than fixing something that might not need a fix.