html怎么快速替换词,react 搜索关键词高亮dangerouslySetInnerHTML的替代方案

大家都知道，dangerouslySetInnerHTML可能会造成XSS攻击，在有UGC业务的情况下，尽量避免使用此属性，所以此时就出现了替代方案，不多bb，先上效果图：

1.gif

再上代码：

import React, { useState } from "react";

const App = () => {

const [search, setSearch] = useState("");

const data = [

{ id: 75, name: "研发部-其他" },

{ id: 154, name: "摸鱼" },

{ id: 14, name: "12343" },

];

const renderName = (name) => {

if (search.length && name.indexOf(search) > -1 && search !== name) {

const temp = name.split(search);

const dom = [];

for (let i = 0; i < temp.length - 0.5; i += 0.5) {

if (Math.floor(i) !== i) {

dom.push(

{search}

);

} else if (temp[i].length) {

dom.push({temp[i]});

}

}

return dom;

} else {

return (

{name}

);

}

};

return (

setSearch(e.target.value)} />

{data.map((item) => (

{renderName(item.name)}

))}

);

};

export default App;