Javascript | 正規表現とsplit

Question

現状

以下のようなhtmlStrがあり、

const htmlStr = '<section id="sec1">セクション1</p></section>' +
  '<REPLACE class="signup_form"></REPLACE>' +
  '<section id="sec2">セクション2</section>' +
  '<REPLACE class="signup_form"></REPLACE>' +
  '<section id="sec3">セクション3</section>' +

以前の質問を参考に以下のような正規表現とsplitを用いると

const regExp = new RegExp('(<REPLACE class="signup_form"></REPLACE>)');
console.log(okHtml.split(regExp));

下記のような配列にすることはできました。(配列の区切りが'<REPLACE class="signup_form"></REPLACE>', に。)

[ 
'<section id="sec1">セクション1</section>',
'<REPLACE class="signup_form"></REPLACE>',
'<section id="sec2">セクション2</section>',
'<REPLACE class="signup_form"></REPLACE>',
'<section id="sec3">セクション3</section>'
]

より汎用的にする方法...を探してます...

例えば、<REPLACE ************></REPLACE>の部分が任意であることを考慮した実装です。
つまり、以下のような文字列において、（facebook_login_formというclassに１つ変わっている）

const htmlStr = '<section id="sec1">セクション1</p></section>' +
  '<REPLACE class="signup_form"></REPLACE>' +
  '<section id="sec2">セクション2</section>' +
  '<REPLACE class="facebook_login_form"></REPLACE>' +  
  '<section id="sec3">セクション3</section>' +

const regExp = new RegExp('(<REPLACE class="signup_form"></REPLACE>)');　
console.log(okHtml.split(regExp));

以下のような配列をくることを期待しています。

[ 
'<section id="sec1">セクション1</section>',
'<REPLACE class="signup_form"></REPLACE>',
'<section id="sec2">セクション2</section>',
'<REPLACE class="facebook_login_form"></REPLACE>',
'<section id="sec3">セクション3</section>'
]

<REPLACE *************></REPLACE>の*部分を任意にし、
配列を区切る要素はあくまで<REPLACE>タグにしたいという要望です。

試してはいるものの、なかなかうまくいきません。ご助力頂けると幸いです。よろしくお願いします...。

1つの解決方法としては...

orでつないでいくというものは把握できました。

const regExp = new RegExp('(<REPLACE class="signup_form"></REPLACE>|<REPLACE class="facebook_login_form"></REPLACE>)');

Answer 1

こんにちは。
正規表現を以下のように修正してみるといかがでしょうか。

修正前：

const regExp = new RegExp('(<REPLACE class="signup_form"></REPLACE>)');

修正後：

const regExp = new RegExp('(<REPLACE class="[a-z_]+"></REPLACE>)');

• 動作確認用のサンプル： https://jsfiddle.net/jun68ykt/6kua1nds/

以上、参考になれば幸いです。

追記

もしくは、 <REPLACE> の class として、 "form_01" や "form_A" のように、数字や大文字アルファベットも含まれる可能性があるのであれば、以下ですかね。

const regExp = new RegExp('(<REPLACE class="\w+"></REPLACE>)');　

• 動作確認用のサンプル： https://jsfiddle.net/jun68ykt/6kua1nds/1

Comments

[jun68ykt]

上記の回答ではマッチさせることができないような、異なる <REPLACE> の出現パターンがあるのであれば、お知らせください。

[退会済みユーザー]

本当にご丁寧にありがとうございます。助かりました。
大変恐縮なのですが、1点お尋ねをしてもよろしいでしょうか。
"\w+"のバックスラッシュが2つ連続になる理由は
どのようにお調べすればよろしいでしょうか。

[退会済みユーザー]

色々調べているのですが、これはエスケープかもしれませんね。

[jun68ykt]

> これはエスケープかもしれませんね。

はい、そうです。

'(<REPLACE class="\w+"></REPLACE>)'

という文字列の中でバックスラッシュを文字を使うために \ と２つ連続させる必要があります。正規表現を作るときに、new RegExp() に文字列を渡すのではなく、正規表現リテラルを使う場合は、以下

https://jsfiddle.net/jun68ykt/6kua1nds/2/

のように

const regExp = /(<REPLACE class="\w+"></REPLACE>)/;

と書けます。
この場合は、 w の前にバックスラッシュを２個連続させる必要はなくなりますが、こんどは、 /REPLACE の / の前にバックスラッシュが必要になります。