我想在自定义bbcode中编写一些文本时为自定义DOM节点添加/ setAttribute类 - 就像文本编辑器一样。如果innerHTML的{{1}}不为空，我会通过<item></item>数组进行过滤，以便找到匹配的值。 可以有无限量的items个节点。 （即2,5,10）
因此，每当我点击名为item的图标时，它在textarea中显示为item，在预览组件中显示为[item][/item]。编写完该项后，我可以在DOM <item></item>中说[item]id123[/item]。
现在，我正在做的是在React之外操作DOM：
<item>itemName123</item>问题是，每当我更改文本时，组件都会重新渲染，以便删除已设置的属性。
我尝试在文本/字符串转换为const setAttributes = (el, item) =>{
el.dataset.img = item.img;
el.setAttribute('class', _.toLower(item.color))
};
const updateItems = () =>{
if(document.querySelectorAll('item')) {
document.querySelectorAll('item').forEach(el => items.find(item => {
if(_.toLower(el.innerHTML) === _.toLower(item.id))
setAttributes(el, item)
}));
}
}
标记之前进行操作，方法是将其拆分为dangerouslySetInnerHTML includes，map所有上帝功能与来自ES6的正则代表酱，但味道很糟糕。
我觉得我觉得必须要有一些我想念的东西。
编辑：忘记添加我还尝试将filter放在课堂外。
编辑＃2：我从setAttributes() && updateItems()更改的方式是通过regexp [item][/item]，所以我可能会在每次重新渲染时使用regexp而不是text.replace(/\[item]/g, <item>).replace(/\[\/item]/g, </item>)执行某些操作？如果是这样，我一直在尝试通过
setAtrribute;
以及稍后new RegExp(/\[item]/+ _.toLower(item.name)+ /\[\/item]/, 'g')
提前感谢任何提示和想法！
答案 0 :(得分：0)
解决。使用RegExp + pattern.exec(text)并使用while循环文本并替换任何匹配的出现。然后使用for(let..of)循环来比较匹配的值并覆盖该值。