ひよっこPGのブログ

主に、技術メモや英語たまにギター関連のことも書いているブログです。

JavaScriptで、HTML文字列からscriptタグを置き換える正規表現で、二つの違い分かる?

今、スクレイピングを使ったプログラムを趣味で書いています。
それでjquery.xdomainajax.jsというライブラリを使っていて、内部実装を見たりしているのですが
scriptタグを置き換える正規表現があり、そこで疑問に思ったことが一個ありました。

下記の62行目が疑問に思った部分です。
jquery.fn/cross-domain-ajax/jquery.xdomainajax.js at master · padolsey/jquery.fn · GitHub

まあ細かいっちゃ細かいことなんですがね〜・・・。


まず、少し前置きをしておきますね。

.replace(/<script[^>]+?\/>|<script(.|\s)*?\/script>/gi, '');

これの意味なんですが、自分の解釈だと

<script type="text/javascript" src="hoge.js" />

or

<script type="text/javascript">
  alert("hoge");
</script>

という2パターン文字列があれば、空文字に置き換える といったように解釈しました。


疑問点をあげると

1つ目

.replace(/<script[^>]+?\/>/gi, '');

2つ目

.replace(/<script[^>]+\/>/gi, '');

違いは、?の有り 無しです。
最短一致か、最長一致かということですねー。。。

最短一致と最長一致については下記二つが参考になります^ー^
JavaScript正規表現 怒濤の100サンプル!! 60.最長マッチで検索する
JavaScript正規表現 怒濤の100サンプル!! 61.最短マッチで検索する

1つ目と2つ目を、自分のローカルで動かしてやってみると
結果が、変わるパターンがどうも思いつかなくて・・・・。
なら、 ?(最短一致)にしなくてもいいんじゃないの? と思ったんですが 分かる方おられますか?

var htmlString = "<script type=\"text/javascript\" \/> スクリプト外ですよー";
var debug1 = htmlString.replace(/<script[^>]+?\/>/gi, "***");
var debug2 = htmlString.replace(/<script[^>]+\/>/gi,  "***");
console.log(debug1);
// => *** スクリプト外ですよー
console.log(debug2);
// => *** スクリプト外ですよー