How to filter HTML from XSS and stuff?

Question

JavaScript

I have a wiziwig editor that generates HTML code, example:

<p class="line" id="line-1"><span style="color: rgb(230, 0, 0);"><span style="background-color: rgb(255, 153, 0);">affasf</span></span><span style="background-color: rgb(255, 255, 255);"><span style="color: rgb(230, 0, 0);"><span style="background-color: rgb(255, 153, 0);">dadssadasda</span></span></span></p><p class="line" id="line-35">эллэл</p><p class="line" id="line-43">шхохохх</p><p class="line" id="line-56"><span style="color: rgb(230, 0, 0);"><span style="background-color: rgb(255, 153, 0);"><b>dddddad</b></span></span></p>

It is sent via Ajax and returned via Ajax on output.

What I'm going to do:
1) replace < and > with [ and ] 2) remove
quotes from tags 3 ) replace &
,",' with their html representation
. other But there was this problem: What if someone doesn't close the tag, let's say [b], then the whole bottom will be bold. Is there any way to solve the problem without counting open and closed tags? Maybe it's better to stick everything in an Iframe? Are there other options for working with HTML text?
[b] -> <b>

Answer 1

First, there is a solution like HTMLPurifier which removes all unresolved tags.
Secondly, simple autocorrect will not help, it is desirable to use regular expressions, in which if the tag is unpaired, it will not be parsed.
Thirdly, there are editors that generate BB markup. I really like WysiBB due to its light weight, great expandability and minimalist design.
If you are interested in this editor - I can throw off a set of rules for autocorrect.

Answer 2

Remember once and for all - HTML is filtered once, before being output to the browser.
If you are using PHP, there is a wonderful htmlspecialchars function. There are similar solutions for other languages.