JavaScriptで文字列内の"<script>"タグの開始から終了のみ取り出す

文字列からJSタグのみ取り出す方法についてアドバイスいただきたいです。

文字列の中に一つだけscriptタグが存在していて、そのタグ部分を取り出した実装を作ったのですが、
残念ながら無理やり実装しているのを感じており、フィードバックをいただきたいです。

例えば

hogehoge
<script type="text/javascript" textsrc="test.js"></script>
fugafuga

↑という文字列から
<script type="text/javascript" src="test.js"></script>
だけを取り出すというイメージです。

以下のコードで取り出すところまではできたのですが、

            var startIndex = targetStr.indexOf("<script");
            var endIndex = targetStr.indexOf("/script>") ;
            if(startIndex === -1 || endIndex === -1) {
                alert("scriptタグがありません");
                return false;   
            }
            var result = targetStr.substring(startIndex, endIndex + 8);// +8で/script>の文字数分だけ数を追加
            console.log(result);

他にもより良い実装方法のアイデアがあればぜひいただきたいです。
（書きながらそれ以外にも、文字列をparseHTMLしてDOMを取得してから文字列化する方法も思いつきました。）

宜しくお願い致します。

行動規範の内容に同意します

回答3件

こんにちは。

ご質問に

（書きながらそれ以外にも、文字列をparseHTMLしてDOMを取得してから文字列化する方法も思いつきました。）

とあったので、この回答では、上記の趣旨で、所与のHTMLからDOMを作って <script>を取得するコードの一例を示します。たとえば、以下のような HTMLファイル test.html があるとします。

$ cat test.html

html
1<!DOCTYPE html>
2<html lang="ja">
3<head>
4    <meta charset="UTF-8">
5    <title>Test</title>
6    <script
7      src="https://code.jquery.com/jquery-3.4.1.min.js"
8      integrity="sha256-CSXorHvZcTNaix6yvo6HPPCzgETByMGWSFlBw8HfCJo="
9      crossorigin="anonymous"></script>
10    <script>
11        $(function() {
12            // something to do
13        });
14    </script>
15    <script src="foo.js"></script><script src="bar.js"></script><script src="bazz.js"></script>
16</head>
17<body>
18
19<!-- Google Analytics -->
20<script>
21  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
22    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
23    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
24  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
25
26  ga('create', 'UA-XXXXX-Y', 'auto');
27  ga('send', 'pageview');
28</script>
29<!-- End Google Analytics -->
30</body>
31</html>

上記のファイル test.html では、ひとつの <script> 要素が複数行にわたっていたり、逆に１行の中に複数の <script>があったりしています。これを読み込んで、各 <script> タグを出力するコマンドライン用のスクリプトを index.js として作りました。

$ node -v

v12.7.0
$ yarn -v
1.21.1
$ cat package.json

json
1{
2  "dependencies": {
3    "fs": "^0.0.1-security",
4    "jquery": "^3.4.1",
5    "jsdom": "^16.2.2"
6  },
7  "license": "UNLICENSED"
8}

$ cat index.js

javascript
1const [fs, { JSDOM }, jquery] = [require('fs'), require('jsdom'), require('jquery')];
2
3// JQuery オブジェクトからHTML文字列を得るための関数
4const htmlStr = jq => jq.clone().wrap('<div/>').parent().html();
5
6// ファイル test.html を読み込み、JQuery オブジェクト $ を作成
7const html = fs.readFileSync('test.html', 'utf-8'),
8      dom = new JSDOM(html),
9      $ = jquery(dom.window);
10
11// scriptタグを収集して、各々をHTML文字列にして表示
12$('script').each(function(i) {
13  console.log(`========== script tag #${i+1} ==========`)
14  console.log(htmlStr($(this)));
15})
16

$ yarn
yarn install v1.21.1

[1/4] ???? Resolving packages...
[2/4] ???? Fetching packages...
[3/4] ???? Linking dependencies...
[4/4] ???? Building fresh packages...

✨ Done in 0.81s.

$ node index.js

========== script tag #1 ==========
<script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorHvZcTNaix6yvo6HPPCzgETByMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
========== script tag #2 ==========
<script>
        $(function() {
            // something to do
        });
    </script>
========== script tag #3 ==========
<script src="foo.js"></script>
========== script tag #4 ==========
<script src="bar.js"></script>
========== script tag #5 ==========
<script src="bazz.js"></script>
========== script tag #6 ==========
<script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-XXXXX-Y', 'auto');
  ga('send', 'pageview');
</script>

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

補足

(1) 上記の index.js の中で、<script> の内容をHTML文字列にする関数htmlStr は、以下から借りています。

https://stackoverflow.com/a/8127137

(2) 上記の回答で挙げた index.js およびテスト用のHTML、 package.json を以下

https://github.com/jun68ykt/q251004

に上げていますので、お手元で試す際にはcloneあるいはforkするなどして、ご利用ください。

補足2

正規表現でやることにしたとすると、（このような行が出現するのはごく希でしょうが）複数の <script>要素を含む（一行の）文字列、たとえば、上記のサンプルとして使った test.html に含まれる下記の行

<script src="foo.js"></script><script src="bar.js"></script><script src="bazz.js"></script>

から、３つの <script>要素を切り出せることが望ましいわけですが、そのような正規表現にはひと工夫が必要です。

投稿2020/04/04 00:31

編集2020/04/04 08:06

jun68ykt

総合スコア9058

yahret45

2020/04/06 02:46

ありがとうございます！丁寧なご説明ありがとうございました。

行動規範の内容に同意します

javascript
1<script>
2var str=`hogehoge
3<script type="text/javascript" textsrc="test.js"></script>
4fugafuga`;
5console.log(str.match(/<script.*</script>/)[0]);
6</script>

投稿2020/04/03 01:55

yambejp

総合スコア114843

yambejp

2020/04/03 01:56

scriptの閉じタグは文字列であってもscriptが過剰反応するのでエスケープ処理が必要です

yahret45

2020/04/03 03:16

ありがとうございます！！正規表現を使うとこんなに短く書けるのですね。参考になりました。

行動規範の内容に同意します

ベストアンサー

バッククォーテーション(Shift+@)で`になる記号を使って，
（確かバッククォーテーションだと正規表現が使えたはず?)
match関数から正規表現を使って目的の文字列を取得してみました!

javascript
1var str = `<!DOCTYPE html>
2<html lang="ja">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <script type="text/javascript" src="sample.js"></script>
7  <title>Document</title>
8</head>
9<body>
10  
11</body>
12</html>`
13
14var bar = str.match('\<script.*\</script\>');
15
16console.log(bar[0]);