replace Specific text to html

Question

how to replace or change specific text to new html?

Old HTML:

<div id="test"> 
 <p>
 [b] lorem ipsum [/b]
 </p>
 <p>
 [textarea] lorem ipsum [/textarea] 
 </p>
</div>

New HTML:

<div id="test">
 <p>
 <b>lorem ipsum</b>
 </p>
 <p>
 <textarea>lorem ipsum</textarea>
 </p>
</div>

Force_Tag = [
 '[b]','<pre>',
 '[/b]','</b>',
 '[textarea]','<textarea>',
 '[/textarea]','</textarea>',
 // ...
]

• Rory McCrossan: Please take care to format your code so it's readable. I've fixed it for you in this question.
• Heretic Monkey: Welcome to Stack Overflow! Please read How to Ask. Key phrases: "Search, and research" and "Explain ... any difficulties that have prevented you from solving it yourself".
• Sisi Sajah: thanks for edit my question... i am newbie on stackoverflow

Answer 1

You can use String.prototype.replace() with RegExp /(\[)|(\])/g to capture "[", "]", replace first capture group with "<", second capture group with ">", set .innerHTML of elements to replacement strings

<div id="test">
 <p>
 [b] lorem ipsum [/b]
 </p>
 <p>
 [textarea] lorem ipsum [/textarea]
 </p>
</div>
<script>
 for (let p of document.querySelectorAll("#test p")) {
 p.innerHTML = p.innerHTML.replace(/(\[)|(\])/g, function(match, p1, p2) {
 if (p1) return "<";
 if (p2) return ">"
 })
 }
 </script>