I am fetching HTML from my backend (generated by CKEditor) I am then using DangerouslySetInnerHTML to render said HTML like this :
const parsed = DOMPurify.sanitize(album.description)
<div dangerouslySetInnerHTML ={{ __html: parsed }} className={styles.albumDescription} </div>
It works fine and I'm able to render my HTML. However I'm having troubles with embed medias. CK editor returns the media link in a <oembed /> tag.
What I would like to do is that each time there is a <oembed />, insert them into <ReactPLayer /> component.
I understand I could probably use vanilla js DOM manipulation and use something like getElementsByTagName but I assume that's not great practice to do that in react.
Using the DOM manipulation the challenge would be to verbatim replace all the attributes that <oembed .... /> would have, not impossible though.
If the incoming html string is not HUGE (running in several MBs), a simple string regex manipulation should do the trick:
Option 1: If you are sure that it'll always be <oembed ... />, then the following works.
const desc = album.description;
oembed_2_player = desc.replaceAll(/\<oembed ([^\/]*)\/\>/gi,"<ReactPLayer $1 />");
const parsed = DOMPurify.sanitize(oembed_2_player)
<div dangerouslySetInnerHTML ={{ __html: parsed }} className={styles.albumDescription} </div>
Option 2: If you expect <oembed ....> ... & you want to translate it into <ReactPlayer ..same-as-in-oembed..> ..dito... then
const desc = album.description;
oembed_2_player = desc.replaceAll(/\<(oembed) ([^\>]*)\>([^\<]*)<\/\1\>/gi,"<ReactPLayer $2>$3</ReactPLayer>");
const parsed = DOMPurify.sanitize(oembed_2_player)
<div dangerouslySetInnerHTML ={{ __html: parsed }} className={styles.albumDescription} </div>
Hope this helps 👍