teratail
回答率
85.30%
teratail header banner
teratail header banner
質問するログイン新規登録
トップJavaScriptに関する質問JavaScriptで文字列内の"<script>"タグの開始から終了のみ取り出す

編集履歴

回答編集履歴

10

テキスト追加

2020/04/04 08:06

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -136,7 +136,7 @@
136
136
 
137
137
  ### 補足2
138
138
 
139
- 正規表現でやることにしたとすると、複数の <script>要素を含む（一行の）文字列、たとえば、上記のサンプルとして使った test.html に含まれる下記の行
139
+ 正規表現でやることにしたとすると、（このような行が出現するのはごく希でしょうが）複数の <script>要素を含む（一行の）文字列、たとえば、上記のサンプルとして使った test.html に含まれる下記の行
140
140
 
141
141
  `<script src="foo.js"></script><script src="bar.js"></script><script src="bazz.js"></script>`
142
142
 

9

テキスト追加

2020/04/04 08:06

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -136,7 +136,7 @@
136
136
 
137
137
  ### 補足2
138
138
 
139
- 正規表現でやることにしたとすると、複数の <script>要素を含むような（１行の）文字列、たとえば、上記のサンプルとして使った test.html に含まれる下記の一行
139
+ 正規表現でやることにしたとすると、複数の <script>要素を含む（一行の）文字列、たとえば、上記のサンプルとして使った test.html に含まれる下記の行
140
140
 
141
141
  `<script src="foo.js"></script><script src="bar.js"></script><script src="bazz.js"></script>`
142
142
 

8

テキスト追加

2020/04/04 04:36

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -136,7 +136,7 @@
136
136
 
137
137
  ### 補足2
138
138
 
139
- 正規表現でやることにしたとすると、複数の <script>要素を含むような（１行の）文字列、たとえば、上記のサンプルとして使った test.html に含まれる下記の行
139
+ 正規表現でやることにしたとすると、複数の <script>要素を含むような（１行の）文字列、たとえば、上記のサンプルとして使った test.html に含まれる下記の一行
140
140
 
141
141
  `<script src="foo.js"></script><script src="bar.js"></script><script src="bazz.js"></script>`
142
142
 

7

テキスト追加

2020/04/04 03:32

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -136,7 +136,7 @@
136
136
 
137
137
  ### 補足2
138
138
 
139
- 正規表現でやることにしたとすると、複数の <script>要素を含むような（１行の）文字列、たとえば
139
+ 正規表現でやることにしたとすると、複数の <script>要素を含むような（１行の）文字列、たとえば、上記のサンプルとして使った test.html に含まれる下記の行
140
140
 
141
141
  `<script src="foo.js"></script><script src="bar.js"></script><script src="bazz.js"></script>`
142
142
 

6

テキスト追加

2020/04/04 03:27

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -132,4 +132,12 @@
132
132
 
133
133
  - [https://github.com/jun68ykt/q251004](https://github.com/jun68ykt/q251004)
134
134
 
135
- に上げていますので、お手元で試す際にはcloneあるいはforkするなどして、ご利用ください。
135
+ に上げていますので、お手元で試す際にはcloneあるいはforkするなどして、ご利用ください。
136
+
137
+ ### 補足2
138
+
139
+ 正規表現でやることにしたとすると、複数の <script>要素を含むような（１行の）文字列、たとえば
140
+
141
+ `<script src="foo.js"></script><script src="bar.js"></script><script src="bazz.js"></script>`
142
+
143
+ から、３つの <script>要素を切り出せることが望ましいわけですが、そのような正規表現にはひと工夫が必要です。

5

テキスト追加

2020/04/04 03:25

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -23,6 +23,7 @@
23
23
  // something to do
24
24
  });
25
25
  </script>
26
+ <script src="foo.js"></script><script src="bar.js"></script><script src="bazz.js"></script>
26
27
  </head>
27
28
  <body>
28
29
 
@@ -41,7 +42,7 @@
41
42
  </html>
42
43
  ```
43
44
 
44
- 上記のファイル **test.html** を読み込んで、各 `<script>` タグを出力するコマンドライン用のスクリプトを **index.js** として作りました。
45
+ 上記のファイル **test.html** では、ひとつの `<script>` 要素が複数行にわたっていたり、逆に１行の中に複数の `<script>`があったりしています。これを読み込んで、各 `<script>` タグを出力するコマンドライン用のスクリプトを **index.js** として作りました。
45
46
 
46
47
  > $ node -v
47
48
  v12.7.0
@@ -72,10 +73,10 @@
72
73
  $ = jquery(dom.window);
73
74
 
74
75
  // scriptタグを収集して、各々をHTML文字列にして表示
75
- $('script').each(function() {
76
+ $('script').each(function(i) {
77
+ console.log(`========== script tag #${i+1} ==========`)
76
78
  console.log(htmlStr($(this)));
77
- console.log("--------------");
78
- });
79
+ })
79
80
 
80
81
  ```
81
82
 
@@ -91,14 +92,21 @@
91
92
  > $ node index.js
92
93
 
93
94
  ```
95
+ ========== script tag #1 ==========
94
96
  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorHvZcTNaix6yvo6HPPCzgETByMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
95
- --------------
97
+ ========== script tag #2 ==========
96
98
  <script>
97
99
  $(function() {
98
100
  // something to do
99
101
  });
100
102
  </script>
101
- --------------
103
+ ========== script tag #3 ==========
104
+ <script src="foo.js"></script>
105
+ ========== script tag #4 ==========
106
+ <script src="bar.js"></script>
107
+ ========== script tag #5 ==========
108
+ <script src="bazz.js"></script>
109
+ ========== script tag #6 ==========
102
110
  <script>
103
111
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
104
112
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
@@ -108,7 +116,8 @@
108
116
  ga('create', 'UA-XXXXX-Y', 'auto');
109
117
  ga('send', 'pageview');
110
118
  </script>
111
- --------------
119
+
120
+
112
121
  ```
113
122
 
114
123
  以上、参考になれば幸いです。

4

テキスト追加

2020/04/04 03:07

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -5,7 +5,7 @@
5
5
  > （書きながらそれ以外にも、文字列をparseHTMLしてDOMを取得してから文字列化する方法も思いつきました。）
6
6
 
7
7
 
8
- とあったので、この回答では、上記の趣旨で、所与のHTMLからDOMを作って `<script>`を取得するコードの一例を示します。たとえば、以下のような HTMLファイル **test.html** があり、これに含まれる `<script>`タグを抜き出すことを考えます。
8
+ とあったので、この回答では、上記の趣旨で、所与のHTMLからDOMを作って `<script>`を取得するコードの一例を示します。たとえば、以下のような HTMLファイル **test.html** があるとします。
9
9
 
10
10
  > $ cat test.html
11
11
  ```html

3

テキスト追加

2020/04/04 02:46

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -1,13 +1,12 @@
1
1
  こんにちは。
2
+
2
3
  ご質問に
3
4
 
4
5
  > （書きながらそれ以外にも、文字列をparseHTMLしてDOMを取得してから文字列化する方法も思いつきました。）
5
6
 
6
7
 
7
- とあったので、正規表現を使わない方法も、回答としてお求めなのかなと思ったので、以下その趣旨で、HTMLからDOMを作る方法による回答になります。
8
+ とあったので、この回答では、上記の趣旨で、所与のHTMLからDOMを作って `<script>`を取得するコードの一例を示します。たとえば、以下のような HTMLファイル **test.html** があり、これに含まれる `<script>`タグを抜き出すことを考えます。
8
9
 
9
- 以下のような HTMLファイル **test.html** があり、これに含まれる `<script>`タグを抜き出します。
10
-
11
10
  > $ cat test.html
12
11
  ```html
13
12
  <!DOCTYPE html>

2

テキスト追加

2020/04/04 02:44

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -42,7 +42,7 @@
42
42
  </html>
43
43
  ```
44
44
 
45
- 上記のファイル **test.html** を読み込んで、各 `<script>` タグの文字列を出力するコマンドライン用のスクリプトを **index.js** として作りました。
45
+ 上記のファイル **test.html** を読み込んで、各 `<script>` タグを出力するコマンドライン用のスクリプトを **index.js** として作りました。
46
46
 
47
47
  > $ node -v
48
48
  v12.7.0

1

テキスト追加

2020/04/04 01:44

投稿

jun68ykt
jun68ykt

スコア9058

answer CHANGED
@@ -112,4 +112,16 @@
112
112
  --------------
113
113
  ```
114
114
 
115
- 以上、参考になれば幸いです。
115
+ 以上、参考になれば幸いです。
116
+
117
+ ### 補足
118
+
119
+ (1) 上記の index.js の中で、`<script>` の内容をHTML文字列にする関数`htmlStr` は、以下から借りています。
120
+
121
+ - [https://stackoverflow.com/a/8127137](https://stackoverflow.com/a/8127137)
122
+
123
+ (2) 上記の回答で挙げた index.js およびテスト用のHTML、 package.json を以下
124
+
125
+ - [https://github.com/jun68ykt/q251004](https://github.com/jun68ykt/q251004)
126
+
127
+ に上げていますので、お手元で試す際にはcloneあるいはforkするなどして、ご利用ください。