RegExを使用してクラス名を使用してdivを作成する

Question

RegExを使用して、私の例の構成をdivに置き換えたいと思います。

だから、前：

後

::: foo 
some text 
::: 

：

<div class="foo"> 
some text 
</div> 

私はそれが（test）を行うことができる方法を見つけましたが、私の解決策は一つのクラスのために働きます。言い換えれば、このクラスは、スクリプトにハードコーディングです：

<script> 
document.body.innerHTML = document.body.innerHTML.replace(new RegExp(/(:::\s?[a-z])\w+/, 'g'), '<div class="foo">'); 
document.body.innerHTML = document.body.innerHTML.replace(new RegExp(/:::/, 'g'), '</div>'); 
</script> 

それは任意のクラス名のために動作しますので、それは、変更することができる方法は？例えば、これらの構造はまた、divタグに変換する必要があります。

::: foobarfoo 
some text 
::: 

、その後

::: foo-bar-foo_bar_foo123-foo 
some text 
::: 

Answer 1

あなたは、つまり、capturing groupsを使用括弧であなたの正規表現の一部を置くことができますし、試合のその部分をしますあなたは$1とそれを参照することができ、交換、で使用するために捕獲さ：

var text = document.body.innerHTML; 
text = text.replace(/:::\s?([^\s:]+)/g, '<div class="$1">') 
text = text.replace(/:::/g, '</div>'); 
document.body.innerHTML = text; 

あなたが複数のキャプチャグループを持っていた場合など目以降のものは$2によって参照されるのと同じ正規表現、$3、あなたがdocument.body.innerHTMLを更新し、繰り返しを避けるべきであると

注 - より良い最後に、その変数を使用して置換を行う、変数に元のテキストを配置します最終結果をdocument.body.innerHTMLに書き戻します。正規表現の最初と最後に/が上の正規表現オブジェクトを作成し、正規表現リテラル構文ですので、あなたが、new RegExp()を呼び出す必要がないということも

document.body.innerHTML = document.body.innerHTML 
          .replace(/:::\s?([^\s:]+)/g, '<div class="$1">') 
          .replace(/:::/g, '</div>'); 

注：あなたはまた、.replace()呼び出しをチェーンすることができますそれ自身。