Develop Reference

How to automatically insert an html tag into a react component?

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 👍

react return markup from dangerouslySetInnerHTML

I have html saved from wysiwyg editor and fetched from database, I need to display the content which I usually do with
<div dangerouslySetInnerHTML={{__html: content}} />
but now I need to use the formatted content inside another component,
so I am hoping if there is a function to return the markup like this
var formattedContent = getMarkup(content)//expecting this to do what dangerouslySetInnerHTML does
<Highlight search="Condominium" >
{formattedContent}
</Highlight>
because this isn't working
<Highlight search="Condominium" >
<div dangerouslySetInnerHTML={{__html: content}} />
</Highlight>
Any help is appreciated as I am nearly struggling for with this more than a day.
What I am trying above is
npmjs.com/package/react-highlighter -- it highlight matched words, but I need to highlight not just plain text but html

The dangerouslySetInnerHTML value is an object with __html as key and your HTML content as value.
<Highlight search="Condominium" >
<div dangerouslySetInnerHTML={{__html: content}} />
</Highlight>
Update:
The Highlight component has already an Attribute innerHTML. You don't need to use dangerouslySetInnerHTML in your case.
From official Documentation:
<Highlight innerHTML={true}>{content}</Highlight>

How I inject HTML with classes received from an API into React?

I'm working on a large React project where we are receiving data from an API we don't control Occasionally we need to receive an HTML string with inline styles and insert all of it directly in our component. It will be passed to us as a string -- I've not gotten a clear answer from the backend team, but I think it will be something like
<textarea rows='1' cols'50' >Some text with <span class='special style'>special styles applied</span></textarea>
How do I insert this into my react component correctly (and safely)? Simply something like the following?
const myHTMLStringFromAPI = getApiStuff()
render(){
return <div>{myHTMLStringFromAPI}</div>
}

You can do what using dangerouslySetInnerHTML
dangerouslySetInnerHTML is React’s replacement for using innerHTML in the browser DOM. This is used because setting innerHTML directly is risky.
const myHTMLStringFromAPI = getApiStuff()
render(){
return <div dangerouslySetInnerHTML={{__html:`<textarea rows='1' cols'50' >Some text with <span class='special style'>special styles applied</span></textarea>`}}>{myHTMLStringFromAPI}</div>
}

Emoticons displayed as raw HTML code

I am using the mattimo:emoticons package in Meteor (https://atmospherejs.com/mattimo/emoticons) to display emoticons. I am using this simple template to test it:
<template name="test">
{{parseEmoticons ":-)"}}
</template>
which is displayed through the route "/test" like so:
Router.route('/test/', function () {
this.render("test");
});
This should display a simple smiley, but instead I get the raw HTML in the browser:
<img class="meteoremoticon" src="/packages/mattimo_emoticons/assets/images/emoticons/caritas_07.png">
How do I get the browser to render the HTML instead of just displaying the unprocessed HTML?

From Meteor documentation:
{{{content}}} - Triple-braced template tags are used to insert raw HTML. Be careful with these! It's your job to make sure the HTML is safe, either by generating it yourself or sanitizing it if it came from a user input.
So, try to use triple braces
<template name="test">
{{{ parseEmoticons ":-)" }}}
</template>

'Echo' html from string in angularjs when the string is on a template

I am using ionic tinder cards and each new card should be inserted in an predefined array as an object, likewise:
{text: "some_text"}
However, I might be getting html in the string and I want that html to be rendered. How can I do this considering the object above goes to a predefined array, something happens on the ionic code and then I inject it like this?
<div class="card">
{{card.text}}
</div>

use ng-bind-html directive: may be require import the sanitize module
<div class="card">
<span ng-bind-html="card.text"></span>
</div>

You should use ng-bind-html
<div class="card">
<span ng-bind-html="card.text"></span>
</div>
If your HTMl contains potentially dangeorus tag (like script tag), you should sanitize it before