Javascript 为文本预览组件中的自定义DOM节点设置属性

我想为自定义DOM节点添加/setAttribute类，同时在自定义

bbcode

类文本编辑器中编写一些文本。当

的

innerHTML

不为空时，我将通过

项

数组进行筛选，以找到匹配的值。可以有无限数量的

项

节点。（即2、5、10）

因此，每当我单击名为

item

的图标时，它在文本区域中显示为

[item][/item]

，在预览组件中显示为

。一旦项目被写入，让我们假设我在DOM中拥有

[item]id123[/item]

项目名称123

现在，我要做的是在外部操纵DOM，并通过以下方式进行反应：

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)
      }));
    }
 }

问题是，每当我更改文本时，组件都会重新渲染，以便删除已设置的属性

我试图在文本/字符串进入

危险的HTML

标记之前对其进行操作，方法是将其拆分，通过

包含
和
映射
，
过滤
所有godsent函数和ES6中的一些正则表达式酱，但它闻起来很难闻

这感觉太刺耳了，我相信一定有什么东西我错过了

编辑：忘了添加我还试图将
setAttributes（）&&updateItems（）
放在类之外的内容

编辑#2：我从
[item][/item]
改变的方式是通过regexp
文本。替换（/\[item]/g，）。替换（/\[\/item]/g，）
，所以我可能可以在每次重新渲染时使用regexp而不是
setatribute
，如果是的话，我已经通过

newregexp（/\[item]/+\.toLower（item.name）+/\[\/item]/，'g'）

以及以后的
text.replace（${{.toLower（item.name）}）

但到目前为止还没有成功

提前感谢您提供的任何提示和想法
 已解决。使用RegExp+
pattern.exec（text）
并在
时循环使用
文本并替换任何匹配的事件。然后用于（let..of）
循环比较匹配的值并覆盖该值