DEV Community

loading...

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

Arnav Bansal
I slay dragons—or take them as pets.
・1 min read

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

Discussion (8)

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.