Sometimes we need to render HTML-marked strings from server, with React. However, React can usually only render UI written in JSX or createElement.
So, let's use unusual methods. I have two ideas💡.
- Use
dangerouslySetInnerHTML🚨 - Use RegExp and Split
Use dangerouslySetInnerHTML 🚨
This is easy but VERY DANGEROUS method (as the documentation says).
const marked = "This sentense has <b>a bold text</b> and <b>another one</b>.";
return <div dangerouslySetInnerHTML={{ __html: marked }} />;
Okey, run it.
Great!😈
But, but, this method carries a significant risk🧨 against XSS attacks.
Use RegExp and Split
As a safe way, split the string and re-markup it.
Here is the sample.
const BoldableText = ({ text }) => {
// shortest match for marked text with <b> tag
const re1 = /<b>(.+?)<\/b>/g;
// for removing tags included in the string matched by re1
const re2 = /<b>(.+)<\/b>/;
// strings to re-markup with JSX
const matched = text
.match(re1) // ["<b>a bold text<b>", "<b>another one</b>"]
.map(s => s.match(re2)[1]); // ["a bold text", "another one"]
// split strings to re-markup
const texts = text.split(re1); // ["This sentense has ", "a bold text", " and", ...]
const markedJsx = texts.map((s, index) => {
if (index === 0 || index === texts.length - 1) {
// first and last item is not the target to re-markup
// because "<b>foo bar</b> buz..." generates ["", "foo bar", " buz"...]
return s;
}
if (matched.includes(s)) {
return <b key={s}>{s}</b>; // re-markup!!
}
return s;
});
return markedJsx;
};
And use it as below.
const marked = "This sentense has <b>a bold text</b> and <b>another one</b>.";
return <BoldableText text={marked} />;
Okey, run it.
I did it!!!🎉🎉🎉🎉🎉
Memo
- Do I really have to use two regular expressions?
- How about nested tags?
- rehype-react is more easy way? (thx @_sunnyone)
Top comments (0)