How can I restructure HTML to remove nested spans using JavaScript?
I need to use JavaScript to reformat input HTML so that the resulting
output HTML is always a sequence of <p> nodes containing only one or more
<span> nodes and each <span> node should contain exactly one #text node.
To provide an example, I'd like to convert HTML which looks like this:
<p style="color:red">This is line #1</p>
<p style="color:blue"><span style="color:yellow"><span
style="color:red">This is</span> line #2</span></p>
To HTML which looks like this:
<p style="color:red"><span style="color:red">This is line #1</span></p>
<p style="color:red"><span style="color:red">This is</span><span
style="color:yellow"> line #2</span></p>
Additional, somewhat tangential information:
The text is within a TinyMCE editor. The HTML needs to conform to this
pattern to make the application more usable and to provide a PDF output
engine with usable HTML (wkhtmltopdf has line height issues if the HTMl
gets too complex and nested spans cause editing in TinyMCE to be
non-intuitive)
jQuery is not available. Prototype.JS is available in the parent window
but not directly in this document. I'm capable of reformatting jQuery code
to pure JavaScript myself but can't actually use jQuery in this instance
:-(
Yes, I have existing code. The logic is clearly so horribly wrong that
it's not worth sharing right now. I'm working to improve it right now and
will share it if I can get it even reasonably close so it would be useful
I really do know what I'm doing! I've just been staring at this code too
long and so the proper algorithm to use is evading me right now...
No comments:
Post a Comment