javascript - Set attribute for custom DOM nodes in text preview component -

i want add / setattribute class custom dom nodes while writing text in custom bbcode-like text editor. when innerhtml of <item></item> not empty i'm filtering through items array in order find value matches. there can unlimited amount of item nodes. (i.e 2, 5, 10)

so whenever click on icon named item shows in textarea [item][/item] , in preview component <item></item>. once item written, lets [item]id123[/item] have in dom <item>itemname123</item>.

now, i'm doing manipulating dom outside react with:

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

the problem is, whenever change text, component re-renders removes attributes have been set.

i tried manipulate text/string before goes dangerouslysetinnerhtml markup splitting it, going through includes map, filter godsent functions regex sauce es6 smells bad.

it feels hacky believe there has i'm missing.

edit: forgot add i've tried put setattributes() && updateitems() outside of class.

edit#2: way i'm changing [item][/item] via regexp text.replace(/\[item]/g, <item>).replace(/\[\/item]/g, </item>), regexp instead of setatrribute on each re-render?and if so, i've been trying via

new regexp(/\[item]/+ _.tolower(item.name)+ /\[\/item]/, 'g');

and later on text.replace(<item class="${item.quality}">${_.tolower(item.name)}</item>)

but no success far.

thanks in advance tips , ideas!

solved. used regexp + pattern.exec(text) , looping through text while , replacing matched occurances. used for(let..of) loop compare matched values , overwrite value.