I cannot seem to get my head around this problem.
- I have a contenteditable div.
- I want to wrap all words and special characters in a tag but keep line breaks.
- I’ve tried sanitize (allowing only spans and br tags) and using all kinds of regular expressions.
Do you guys know any npms or have ideas as to how this might be done?
It doesn’t neccesarilly need to happen as the user types.
I have categories which the user must select after typing the text. Ie. “Animal”, “Food” and “People”. The user must select a category and the he/she can click on any word in the contenteditable.
Let’s say I enter:
Peter loves his dog.
<span class=“word”>Peter</span> <span class=“word”>loves</span> <span class=“word”>his</span> <span class=“word”>dog</span><span class=“word”>.</span>
User then clicks “People” and then clicks “Peter” =>
<span class=“people”>Peter</span> <span class=“word”>loves</span> <span class=“word”>his</span> <span class=“word”>dog</span><span class=“word”>.</span>
Then user clicks “Animal” and then clicks “dog” =>
<span class=“people”>Peter</span> <span class=“word”>loves</span> <span class=“word”>his</span> <span class=“animal”>dog</span><span class=“word”>.</span>
I know how to change the class name of a clicked span class, but the formatting leasing to these steps, I cannot get my head around :(
Any ideas are really appreciated.
Thanks in advance for any guidance to npm installations or simply ideas.