I’m working with JavaScript and need to manipulate HTML strings, I tried in many ways but I couldn’t figure out the solution.
I want to achieve the following.
If the text content within a tag starts with a space, move that space before the opening tag.
If the text content ends with a space, move that space after the closing tag.
While I’ve explored using regular expressions for this task, I understand their limitations with complex HTML structures. Is there a reliable solution for this scenario?
Example Input:
<code>`<p><strong>Test </strong><strong style="background-color: rgb(203, 213, 225); color: rgb(39, 50, 102);">name</strong><em> content </em></p>`
</code>
<code>`<p><strong>Test </strong><strong style="background-color: rgb(203, 213, 225); color: rgb(39, 50, 102);">name</strong><em> content </em></p>`
</code>
`<p><strong>Test </strong><strong style="background-color: rgb(203, 213, 225); color: rgb(39, 50, 102);">name</strong><em> content </em></p>`
expected output:
<code>`<p><strong>Test</strong> <strong style="background-color: rgb(203, 213, 225); color: rgb(39, 50, 102);">name</strong> <em>content</em> </p>`
</code>
<code>`<p><strong>Test</strong> <strong style="background-color: rgb(203, 213, 225); color: rgb(39, 50, 102);">name</strong> <em>content</em> </p>`
</code>
`<p><strong>Test</strong> <strong style="background-color: rgb(203, 213, 225); color: rgb(39, 50, 102);">name</strong> <em>content</em> </p>`
Looking for a solution in JavaScript that effectively handles these space adjustments across various HTML structures.
1