回答編集履歴

5

追記

2020/09/24 12:43

投稿

Zuishin
Zuishin

スコア28669

test CHANGED
@@ -1,10 +1,20 @@
1
+ ### 追記
2
+
3
+
4
+
5
+ すみません。slice を splice と書いていました。
6
+
1
- とりあえずこれでできます。ただ href の中身がテキストでなく URL ので、https:// 始まりになりま
7
+ td 4 番目すべて div だったので、次で取得できていると思うんでが、どうでしょうか
8
+
9
+ 長くなりすぎたので、今までの回答は削除しました。
10
+
11
+ 編集履歴の中にあります。
2
12
 
3
13
 
4
14
 
5
15
  ```JavaScript
6
16
 
7
- const aToHref = a => a.href;
17
+ const aToHref = a => new RegExp(/(?<=href=").+?(?=")/).exec(a.outerHTML)[0];
8
18
 
9
19
  const liToHref = li => aToHref(li.querySelector("a"));
10
20
 
@@ -12,372 +22,16 @@
12
22
 
13
23
  .from(td.querySelectorAll("li, div"))
14
24
 
15
- .map(element => element.nodeName == "LI" ? liToHref(element) : "-");
25
+ .map(element => element.nodeName === "LI" ? liToHref(element) : "-");
16
26
 
17
27
  const result = Array
18
28
 
19
- .from(document.querySelectorAll("tr"))
29
+ .from(document.querySelectorAll("#view-table tr"))
20
30
 
21
- .flatMap(a => Array.from(a.querySelectorAll("td")).splice(3, 4))
31
+ .flatMap(a => Array.from(a.querySelectorAll("td")).slice(3, 4))
22
32
 
23
33
  .map(td => tdToHref(td));
24
34
 
25
35
  console.log(result);
26
36
 
27
37
  ```
28
-
29
-
30
-
31
- ### 追記
32
-
33
-
34
-
35
- href を書いたままの値で取得したい場合は、aToHref を次のものに差し替えてください。
36
-
37
-
38
-
39
- ```JavaScript
40
-
41
- const aToHref = a => new RegExp(/(?<=href=").+?(?=")/).exec(a.outerHTML)[0];
42
-
43
- ```
44
-
45
-
46
-
47
- ### 追記
48
-
49
-
50
-
51
- map や flatMap を使わず、for を使って同じもの(ただし配列を返すのではなく、表示するだけ)を書いてみました。
52
-
53
- もし多く取りすぎているのだとしたら、深い階層のものも拾っているのではないかと思います。
54
-
55
-
56
-
57
- ```JavaScript
58
-
59
- const aToHref = a => {
60
-
61
- return a.href;
62
-
63
- };
64
-
65
-
66
-
67
- const liToHref = li => {
68
-
69
- return aToHref(li.querySelector("a"));
70
-
71
- };
72
-
73
-
74
-
75
- const tdToHref = td => {
76
-
77
- const source = td.querySelectorAll("li, div");
78
-
79
- const result = [];
80
-
81
- for (const element of source) {
82
-
83
- if (element.nodeName === "LI") {
84
-
85
- result.push(liToHref(element));
86
-
87
- } else {
88
-
89
- result.push("-");
90
-
91
- }
92
-
93
- };
94
-
95
- return result;
96
-
97
- };
98
-
99
-
100
-
101
- for (const tr of document.querySelectorAll("tr")) {
102
-
103
- const result = [];
104
-
105
- for (const td of tr.querySelectorAll("td")) {
106
-
107
- result.push(tdToHref(td));
108
-
109
- }
110
-
111
- console.log(result[3]);
112
-
113
- }
114
-
115
- ```
116
-
117
-
118
-
119
- ### 追記
120
-
121
-
122
-
123
- 現時点で問題が確認されないコードです。ついでにこれがうまく動くかどうかも確認してみてください。
124
-
125
-
126
-
127
- ```HTML
128
-
129
- <!DOCTYPE html>
130
-
131
- <html lang="ja">
132
-
133
- <head>
134
-
135
- <meta charset="UTF-8">
136
-
137
- <title>Document</title>
138
-
139
- </head>
140
-
141
- <body>
142
-
143
- <div id="view-table">
144
-
145
- <table>
146
-
147
- <tbody>
148
-
149
- <tr>
150
-
151
- <td></td>
152
-
153
- <td></td>
154
-
155
- <td></td>
156
-
157
- <td>
158
-
159
- <ul>
160
-
161
- <li><a href="#"></a></li>
162
-
163
- </ul>
164
-
165
- </td>
166
-
167
- </tr>
168
-
169
- <tr>
170
-
171
- <td></td>
172
-
173
- <td></td>
174
-
175
- <td>
176
-
177
- <ul>
178
-
179
- <li><a href="##"></a></li>
180
-
181
- <li><a href="###"></a></li>
182
-
183
- </ul>
184
-
185
- </td>
186
-
187
- <td>
188
-
189
- <ul>
190
-
191
- <li><a href="##"></a></li>
192
-
193
- <li><a href="###"></a></li>
194
-
195
- </ul>
196
-
197
- </td>
198
-
199
- <td>
200
-
201
- <ul>
202
-
203
- <li><a href="##"></a></li>
204
-
205
- <li><a href="###"></a></li>
206
-
207
- </ul>
208
-
209
- </td>
210
-
211
- <td>
212
-
213
- <ul>
214
-
215
- <li><a href="##"></a></li>
216
-
217
- <li><a href="###"></a></li>
218
-
219
- </ul>
220
-
221
- </td>
222
-
223
- <td>
224
-
225
- <ul>
226
-
227
- <li><a href="##"></a></li>
228
-
229
- <li><a href="###"></a></li>
230
-
231
- </ul>
232
-
233
- </td>
234
-
235
- <td>
236
-
237
- <ul>
238
-
239
- <li><a href="##"></a></li>
240
-
241
- <li><a href="###"></a></li>
242
-
243
- </ul>
244
-
245
- </td>
246
-
247
- <td>
248
-
249
- <ul>
250
-
251
- <li><a href="##"></a></li>
252
-
253
- <li><a href="###"></a></li>
254
-
255
- </ul>
256
-
257
- </td>
258
-
259
- <td>
260
-
261
- <ul>
262
-
263
- <li><a href="##"></a></li>
264
-
265
- <li><a href="###"></a></li>
266
-
267
- </ul>
268
-
269
- </td>
270
-
271
- </tr>
272
-
273
- <tr>
274
-
275
- <td></td>
276
-
277
- <td></td>
278
-
279
- <td></td>
280
-
281
- <td>
282
-
283
- <div></div>
284
-
285
- </td>
286
-
287
- </tr>
288
-
289
- </tbody>
290
-
291
- <table>
292
-
293
- </div>
294
-
295
-
296
-
297
- <script>
298
-
299
- const aToHref = a => {
300
-
301
- return a.href;
302
-
303
- };
304
-
305
-
306
-
307
- const liToHref = li => {
308
-
309
- return aToHref(li.querySelector("a"));
310
-
311
- };
312
-
313
-
314
-
315
- const tdToHref = td => {
316
-
317
- const source = td.querySelectorAll("li, div");
318
-
319
- const result = [];
320
-
321
- for (const element of source) {
322
-
323
- if (element.nodeName === "LI") {
324
-
325
- result.push(liToHref(element));
326
-
327
- } else {
328
-
329
- result.push("-");
330
-
331
- }
332
-
333
- };
334
-
335
- return result;
336
-
337
- };
338
-
339
-
340
-
341
- for (const tr of document.querySelectorAll("#view-table tr")) {
342
-
343
- const result = [];
344
-
345
- for (const td of tr.querySelectorAll("td")) {
346
-
347
- result.push(tdToHref(td));
348
-
349
- }
350
-
351
- console.log(result[3]);
352
-
353
- }
354
-
355
-
356
-
357
- // const aToHref = a => new RegExp(/(?<=href=").+?(?=")/).exec(a.outerHTML)[0];
358
-
359
- // const liToHref = li => aToHref(li.querySelector("a"));
360
-
361
- // const tdToHref = td => Array
362
-
363
- // .from(td.querySelectorAll("li, div"))
364
-
365
- // .map(element => element.nodeName == "LI" ? liToHref(element) : "-");
366
-
367
- // const result = Array
368
-
369
- // .from(document.querySelectorAll("tr"))
370
-
371
- // .flatMap(a => Array.from(a.querySelectorAll("td")).splice(3, 4))
372
-
373
- // .map(td => tdToHref(td));
374
-
375
- // console.log(result);
376
-
377
- </script>
378
-
379
- </body>
380
-
381
- </html>
382
-
383
- ```

4

追記

2020/09/24 12:43

投稿

Zuishin
Zuishin

スコア28669

test CHANGED
@@ -113,3 +113,271 @@
113
113
  }
114
114
 
115
115
  ```
116
+
117
+
118
+
119
+ ### 追記
120
+
121
+
122
+
123
+ 現時点で問題が確認されないコードです。ついでにこれがうまく動くかどうかも確認してみてください。
124
+
125
+
126
+
127
+ ```HTML
128
+
129
+ <!DOCTYPE html>
130
+
131
+ <html lang="ja">
132
+
133
+ <head>
134
+
135
+ <meta charset="UTF-8">
136
+
137
+ <title>Document</title>
138
+
139
+ </head>
140
+
141
+ <body>
142
+
143
+ <div id="view-table">
144
+
145
+ <table>
146
+
147
+ <tbody>
148
+
149
+ <tr>
150
+
151
+ <td></td>
152
+
153
+ <td></td>
154
+
155
+ <td></td>
156
+
157
+ <td>
158
+
159
+ <ul>
160
+
161
+ <li><a href="#"></a></li>
162
+
163
+ </ul>
164
+
165
+ </td>
166
+
167
+ </tr>
168
+
169
+ <tr>
170
+
171
+ <td></td>
172
+
173
+ <td></td>
174
+
175
+ <td>
176
+
177
+ <ul>
178
+
179
+ <li><a href="##"></a></li>
180
+
181
+ <li><a href="###"></a></li>
182
+
183
+ </ul>
184
+
185
+ </td>
186
+
187
+ <td>
188
+
189
+ <ul>
190
+
191
+ <li><a href="##"></a></li>
192
+
193
+ <li><a href="###"></a></li>
194
+
195
+ </ul>
196
+
197
+ </td>
198
+
199
+ <td>
200
+
201
+ <ul>
202
+
203
+ <li><a href="##"></a></li>
204
+
205
+ <li><a href="###"></a></li>
206
+
207
+ </ul>
208
+
209
+ </td>
210
+
211
+ <td>
212
+
213
+ <ul>
214
+
215
+ <li><a href="##"></a></li>
216
+
217
+ <li><a href="###"></a></li>
218
+
219
+ </ul>
220
+
221
+ </td>
222
+
223
+ <td>
224
+
225
+ <ul>
226
+
227
+ <li><a href="##"></a></li>
228
+
229
+ <li><a href="###"></a></li>
230
+
231
+ </ul>
232
+
233
+ </td>
234
+
235
+ <td>
236
+
237
+ <ul>
238
+
239
+ <li><a href="##"></a></li>
240
+
241
+ <li><a href="###"></a></li>
242
+
243
+ </ul>
244
+
245
+ </td>
246
+
247
+ <td>
248
+
249
+ <ul>
250
+
251
+ <li><a href="##"></a></li>
252
+
253
+ <li><a href="###"></a></li>
254
+
255
+ </ul>
256
+
257
+ </td>
258
+
259
+ <td>
260
+
261
+ <ul>
262
+
263
+ <li><a href="##"></a></li>
264
+
265
+ <li><a href="###"></a></li>
266
+
267
+ </ul>
268
+
269
+ </td>
270
+
271
+ </tr>
272
+
273
+ <tr>
274
+
275
+ <td></td>
276
+
277
+ <td></td>
278
+
279
+ <td></td>
280
+
281
+ <td>
282
+
283
+ <div></div>
284
+
285
+ </td>
286
+
287
+ </tr>
288
+
289
+ </tbody>
290
+
291
+ <table>
292
+
293
+ </div>
294
+
295
+
296
+
297
+ <script>
298
+
299
+ const aToHref = a => {
300
+
301
+ return a.href;
302
+
303
+ };
304
+
305
+
306
+
307
+ const liToHref = li => {
308
+
309
+ return aToHref(li.querySelector("a"));
310
+
311
+ };
312
+
313
+
314
+
315
+ const tdToHref = td => {
316
+
317
+ const source = td.querySelectorAll("li, div");
318
+
319
+ const result = [];
320
+
321
+ for (const element of source) {
322
+
323
+ if (element.nodeName === "LI") {
324
+
325
+ result.push(liToHref(element));
326
+
327
+ } else {
328
+
329
+ result.push("-");
330
+
331
+ }
332
+
333
+ };
334
+
335
+ return result;
336
+
337
+ };
338
+
339
+
340
+
341
+ for (const tr of document.querySelectorAll("#view-table tr")) {
342
+
343
+ const result = [];
344
+
345
+ for (const td of tr.querySelectorAll("td")) {
346
+
347
+ result.push(tdToHref(td));
348
+
349
+ }
350
+
351
+ console.log(result[3]);
352
+
353
+ }
354
+
355
+
356
+
357
+ // const aToHref = a => new RegExp(/(?<=href=").+?(?=")/).exec(a.outerHTML)[0];
358
+
359
+ // const liToHref = li => aToHref(li.querySelector("a"));
360
+
361
+ // const tdToHref = td => Array
362
+
363
+ // .from(td.querySelectorAll("li, div"))
364
+
365
+ // .map(element => element.nodeName == "LI" ? liToHref(element) : "-");
366
+
367
+ // const result = Array
368
+
369
+ // .from(document.querySelectorAll("tr"))
370
+
371
+ // .flatMap(a => Array.from(a.querySelectorAll("td")).splice(3, 4))
372
+
373
+ // .map(td => tdToHref(td));
374
+
375
+ // console.log(result);
376
+
377
+ </script>
378
+
379
+ </body>
380
+
381
+ </html>
382
+
383
+ ```

3

修正

2020/09/24 11:59

投稿

Zuishin
Zuishin

スコア28669

test CHANGED
@@ -48,7 +48,7 @@
48
48
 
49
49
 
50
50
 
51
- map や flatMap を使わず、for を使って同じものを書いてみました。
51
+ map や flatMap を使わず、for を使って同じもの(ただし配列返すのではなく、表示するだけ)を書いてみました。
52
52
 
53
53
  もし多く取りすぎているのだとしたら、深い階層のものも拾っているのではないかと思います。
54
54
 

2

追記

2020/09/24 11:33

投稿

Zuishin
Zuishin

スコア28669

test CHANGED
@@ -41,3 +41,75 @@
41
41
  const aToHref = a => new RegExp(/(?<=href=").+?(?=")/).exec(a.outerHTML)[0];
42
42
 
43
43
  ```
44
+
45
+
46
+
47
+ ### 追記
48
+
49
+
50
+
51
+ map や flatMap を使わず、for を使って同じものを書いてみました。
52
+
53
+ もし多く取りすぎているのだとしたら、深い階層のものも拾っているのではないかと思います。
54
+
55
+
56
+
57
+ ```JavaScript
58
+
59
+ const aToHref = a => {
60
+
61
+ return a.href;
62
+
63
+ };
64
+
65
+
66
+
67
+ const liToHref = li => {
68
+
69
+ return aToHref(li.querySelector("a"));
70
+
71
+ };
72
+
73
+
74
+
75
+ const tdToHref = td => {
76
+
77
+ const source = td.querySelectorAll("li, div");
78
+
79
+ const result = [];
80
+
81
+ for (const element of source) {
82
+
83
+ if (element.nodeName === "LI") {
84
+
85
+ result.push(liToHref(element));
86
+
87
+ } else {
88
+
89
+ result.push("-");
90
+
91
+ }
92
+
93
+ };
94
+
95
+ return result;
96
+
97
+ };
98
+
99
+
100
+
101
+ for (const tr of document.querySelectorAll("tr")) {
102
+
103
+ const result = [];
104
+
105
+ for (const td of tr.querySelectorAll("td")) {
106
+
107
+ result.push(tdToHref(td));
108
+
109
+ }
110
+
111
+ console.log(result[3]);
112
+
113
+ }
114
+
115
+ ```

1

追記

2020/09/24 11:30

投稿

Zuishin
Zuishin

スコア28669

test CHANGED
@@ -25,3 +25,19 @@
25
25
  console.log(result);
26
26
 
27
27
  ```
28
+
29
+
30
+
31
+ ### 追記
32
+
33
+
34
+
35
+ href を書いたままの値で取得したい場合は、aToHref を次のものに差し替えてください。
36
+
37
+
38
+
39
+ ```JavaScript
40
+
41
+ const aToHref = a => new RegExp(/(?<=href=").+?(?=")/).exec(a.outerHTML)[0];
42
+
43
+ ```