文字列内の要素にクラスを追加する

Question

文字列内のフォーム要素にクラスを追加したいと思います。 jQueryなしでこれを行う簡単な方法はありますか？

var foo = '<form class="overlay"><div></div></form>'; 
foo.classList.add('bar'); 
console.log(foo); 

Answer 1

最も簡単な方法は、メモリ内divを使用してDOM要素にfooを変換することです。次に、classを追加した後にinnerHTMLで文字列に戻すことができます。ちなみに、regexやその他の文字列操作メソッドでHTML文字列を操作することはお勧めしません。

var foo = '<form class="overlay"><div></div></form>'; 
 
var div = document.createElement('div'); 
 
div.innerHTML = foo; 
 
div.querySelector('form').classList.add('bar'); 
 
alert(div.innerHTML);