How to render a string containing html tag elements
Recently, there is a demand for search and replacement. Users can enter keyword information to match the corresponding data, and then mark and display their keywords, as shown in the following figure:
The idea to realize the above requirements is that the front end judges the search content, and sets the corresponding keywords in the content to a background color style. The code is as follows:
if (content?.includes(serachV)) {
content = content.replaceAll(serachV, `<span style="background-color: gold;">${
serachV}</span>`);
return content
}
But after this setting, I did not achieve the effect I wanted. The front-end display did not turn yellow, and it did not take effect.
After consulting the information, I found that in react, for reasons of security (XSS attack), all expressions inserted in React.js will be automatically escaped, which is equivalent to the text(…) function in jQuery , any HTML formatting will be escaped.
Therefore, the content after operation through the rich text editor will retain the original label style and cannot be displayed correctly, as shown in the red box in the following figure:
So we can use dangerouslySetInnerHTMLthis api to set it as internal HTML to achieve the above effect, the code is as follows:
if (content?.includes(serachV)) {
content = content.replaceAll(serachV, `<span style="background-color: gold;">${
serachV}</span>`);
return <span dangerouslySetInnerHTML={
{
__html: content }} />;
}
The complete code is as follows:
export const quickReplaceColumns = (serachV: string) => {
const renderNode = (content: string) => {
if (content?.includes(serachV)) {
content = content.replaceAll(serachV, `<span style="background-color: gold;">${
serachV}</span>`);
return <span dangerouslySetInnerHTML={
{
__html: content }} />;
}
return content || '--';
};
return [
{
title: '用例名称',
dataIndex: 'name',
width: '30%',
render: (name: string) => renderNode(name),
},
{
title: '用例内容',
dataIndex: 'content',
width: '50%',
render: (content: string) => renderNode(content),
},
{
title: '所属模块',
dataIndex: 'module_name',
width: '10%',
},
];
};
The effect is as follows:
What is dangerouslySetInnerHTML
dangerouslySetInnerHTMl is an attribute of the React tag, and the translation of dangerouslySetInnerHTML is: dangerously set internal HTML.
Why is it dangerous? Because user input is uncontrollable, if such an operation is developed for user input, it may lead to cross-site scripting (XSS) attacks or other web page attacks, and some unexpected errors will appear.
However, our usage here controls the input and is not open to user input, so the above situation will not occur, so you can use it with confidence.
Precautions for use
- The grammar of dangerouslySetInnerHTML: the first layer { } represents JSX syntax, and the second layer { } is a key-value pair of __html:string.
<img className="detail_img" src=${v[0]} />At first , all the results rendered without backticks were [object Object]. It took me a long time to realize it__html:string- The html code wrapped in backticks is no longer JSX syntax, so clasName should be changed to class;