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

編集履歴

回答編集履歴

10

テキスト追加

2020/04/04 08:06

投稿

jun68ykt
jun68ykt

スコア9058

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

9

テキスト追加

2020/04/04 08:06

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -274,7 +274,7 @@
274
274
 
275
275
 
276
276
 
277
- 正規表現でやることにしたとすると、複数の <script>要素を含むような（１行の）文字列、たとえば、上記のサンプルとして使った test.html に含まれる下記の一行
277
+ 正規表現でやることにしたとすると、複数の <script>要素を含む（一行の）文字列、たとえば、上記のサンプルとして使った test.html に含まれる下記の行
278
278
 
279
279
 
280
280
 

8

テキスト追加

2020/04/04 04:36

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -274,7 +274,7 @@
274
274
 
275
275
 
276
276
 
277
- 正規表現でやることにしたとすると、複数の <script>要素を含むような（１行の）文字列、たとえば、上記のサンプルとして使った test.html に含まれる下記の行
277
+ 正規表現でやることにしたとすると、複数の <script>要素を含むような（１行の）文字列、たとえば、上記のサンプルとして使った test.html に含まれる下記の一行
278
278
 
279
279
 
280
280
 

7

テキスト追加

2020/04/04 03:32

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -274,7 +274,7 @@
274
274
 
275
275
 
276
276
 
277
- 正規表現でやることにしたとすると、複数の <script>要素を含むような（１行の）文字列、たとえば
277
+ 正規表現でやることにしたとすると、複数の <script>要素を含むような（１行の）文字列、たとえば、上記のサンプルとして使った test.html に含まれる下記の行
278
278
 
279
279
 
280
280
 

6

テキスト追加

2020/04/04 03:27

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -267,3 +267,19 @@
267
267
 
268
268
 
269
269
  に上げていますので、お手元で試す際にはcloneあるいはforkするなどして、ご利用ください。
270
+
271
+
272
+
273
+ ### 補足2
274
+
275
+
276
+
277
+ 正規表現でやることにしたとすると、複数の <script>要素を含むような（１行の）文字列、たとえば
278
+
279
+
280
+
281
+ `<script src="foo.js"></script><script src="bar.js"></script><script src="bazz.js"></script>`
282
+
283
+
284
+
285
+ から、３つの <script>要素を切り出せることが望ましいわけですが、そのような正規表現にはひと工夫が必要です。

5

テキスト追加

2020/04/04 03:25

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -48,6 +48,8 @@
48
48
 
49
49
  </script>
50
50
 
51
+ <script src="foo.js"></script><script src="bar.js"></script><script src="bazz.js"></script>
52
+
51
53
  </head>
52
54
 
53
55
  <body>
@@ -84,7 +86,7 @@
84
86
 
85
87
 
86
88
 
87
- 上記のファイル **test.html** を読み込んで、各 `<script>` タグを出力するコマンドライン用のスクリプトを **index.js** として作りました。
89
+ 上記のファイル **test.html** では、ひとつの `<script>` 要素が複数行にわたっていたり、逆に１行の中に複数の `<script>`があったりしています。これを読み込んで、各 `<script>` タグを出力するコマンドライン用のスクリプトを **index.js** として作りました。
88
90
 
89
91
 
90
92
 
@@ -146,13 +148,13 @@
146
148
 
147
149
  // scriptタグを収集して、各々をHTML文字列にして表示
148
150
 
149
- $('script').each(function() {
151
+ $('script').each(function(i) {
152
+
153
+ console.log(`========== script tag #${i+1} ==========`)
150
154
 
151
155
  console.log(htmlStr($(this)));
152
156
 
153
- console.log("--------------");
154
-
155
- });
157
+ })
156
158
 
157
159
 
158
160
 
@@ -184,9 +186,11 @@
184
186
 
185
187
  ```
186
188
 
189
+ ========== script tag #1 ==========
190
+
187
191
  <script src="https://code.jquery.com/jquery-3.4.1.min.js" integrity="sha256-CSXorHvZcTNaix6yvo6HPPCzgETByMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
188
192
 
189
- --------------
193
+ ========== script tag #2 ==========
190
194
 
191
195
  <script>
192
196
 
@@ -198,7 +202,19 @@
198
202
 
199
203
  </script>
200
204
 
201
- --------------
205
+ ========== script tag #3 ==========
206
+
207
+ <script src="foo.js"></script>
208
+
209
+ ========== script tag #4 ==========
210
+
211
+ <script src="bar.js"></script>
212
+
213
+ ========== script tag #5 ==========
214
+
215
+ <script src="bazz.js"></script>
216
+
217
+ ========== script tag #6 ==========
202
218
 
203
219
  <script>
204
220
 
@@ -218,7 +234,9 @@
218
234
 
219
235
  </script>
220
236
 
221
- --------------
237
+
238
+
239
+
222
240
 
223
241
  ```
224
242
 

4

テキスト追加

2020/04/04 03:07

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -12,7 +12,7 @@
12
12
 
13
13
 
14
14
 
15
- とあったので、この回答では、上記の趣旨で、所与のHTMLからDOMを作って `<script>`を取得するコードの一例を示します。たとえば、以下のような HTMLファイル **test.html** があり、これに含まれる `<script>`タグを抜き出すことを考えます。
15
+ とあったので、この回答では、上記の趣旨で、所与のHTMLからDOMを作って `<script>`を取得するコードの一例を示します。たとえば、以下のような HTMLファイル **test.html** があるとします。
16
16
 
17
17
 
18
18
 

3

テキスト追加

2020/04/04 02:46

投稿

jun68ykt
jun68ykt

スコア9058

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

2

テキスト追加

2020/04/04 02:44

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -86,7 +86,7 @@
86
86
 
87
87
 
88
88
 
89
- 上記のファイル **test.html** を読み込んで、各 `<script>` タグの文字列を出力するコマンドライン用のスクリプトを **index.js** として作りました。
89
+ 上記のファイル **test.html** を読み込んで、各 `<script>` タグを出力するコマンドライン用のスクリプトを **index.js** として作りました。
90
90
 
91
91
 
92
92
 

1

テキスト追加

2020/04/04 01:44

投稿

jun68ykt
jun68ykt

スコア9058

test CHANGED
@@ -227,3 +227,27 @@
227
227
 
228
228
 
229
229
  以上、参考になれば幸いです。
230
+
231
+
232
+
233
+ ### 補足
234
+
235
+
236
+
237
+ (1) 上記の index.js の中で、`<script>` の内容をHTML文字列にする関数`htmlStr` は、以下から借りています。
238
+
239
+
240
+
241
+ - [https://stackoverflow.com/a/8127137](https://stackoverflow.com/a/8127137)
242
+
243
+
244
+
245
+ (2) 上記の回答で挙げた index.js およびテスト用のHTML、 package.json を以下
246
+
247
+
248
+
249
+ - [https://github.com/jun68ykt/q251004](https://github.com/jun68ykt/q251004)
250
+
251
+
252
+
253
+ に上げていますので、お手元で試す際にはcloneあるいはforkするなどして、ご利用ください。