正規表現による置換：htmlの属性値の設定されていない属性を、javascriptで置換（削除）したい。

実現したいこと

htmlの属性値が設定されていない属性を、
javascriptにて正規表現を使用して削除したい。

理由

GASにてURLからfetch()したhtmlをスクレイピングしてスプレッドシートに保存しています。

GGASではjavascriptのgetElementsByClassName()が利用できなかった為、
代わりに ~~XmlService~~ xmlスクレイピングライブラリ（https://tadaken3.hatenablog.jp/entry/parser-for-gas）を利用しています。

その為、Xmlの形式とは異なるhtmlを無理やりxml形式に直したい。

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

属性値の設定されていない下記の属性を削除したいのですが、
現在の正規表現だと、削除したい属性がタグ内に2つ以上存在する場合、1つしか削除されなくて困っています。

data-mydata2（削除されない）
data-mydata4（削除されない）
data-mydata5（削除される）
readonly （タグ内に1つなので、削除される）

javascript
1var html = `
2<html>
3	りんごは おいしい です
4
5	<div class="class1 class2" data-mydata="" data-mydata2 data-mydata3="999" data-mydata4 data-mydata5></div>
6
7	<textarea class="class1" readonly></textarea>
8	<textarea readonly class="class2"></textarea>
9</html>
10`;
11
12console.log("▼置換前");
13console.log(html);
14
15
16html_置換後 = html.replace(/(<[^<>]*)(\s)([^= "<>]+)(\s|>)/g, '$1$4');
17
18console.log("▼置換後");
19console.log(html_置換後);
20
21/*
22▼置換前
23<html>
24	りんごは おいしい です
25
26	<div class="class1 class2" data-mydata="" data-mydata2 data-mydata3="999" data-mydata4 data-mydata5></div>
27
28	<textarea class="class1" readonly></textarea>
29	<textarea readonly class="class2"></textarea>
30</html>
31
32
33▼置換後
34<html>
35	りんごは おいしい です
36
37	<div class="class1 class2" data-mydata="" data-mydata2 data-mydata3="999" data-mydata4></div>
38
39	<textarea class="class1"></textarea>
40	<textarea class="class2"></textarea>
41</html>
42
43
44▼このようにしたい。
45<html>
46	りんごは おいしい です
47
48	<div class="class1 class2" data-mydata="" data-mydata3="999"></div>
49
50	<textarea class="class1"></textarea>
51	<textarea class="class2"></textarea>
52</html>
53*/

▼左は置換前のhtml、右が置換後のhtmlです。

青線の属性が削除されなくて困っています。

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

回答1件

ベストアンサー

javascript
1var html = `
2<html>
3    りんごは おいしい です
4
5    <div class="class1 class2" data-mydata="" data-mydata2 data-mydata3="999" data-mydata4 data-mydata5></div>
6
7    <textarea class="class1" readonly></textarea>
8    <textarea readonly class="class2"></textarea>
9</html>
10`;
11
12console.log("▼置換前");
13console.log(html);
14
15
16html_置換後 = html.replace(/(<[^\s]+)(.*?)(>)/g, (_,p1,p2,p3)=>`${p1}${p2.replace(/(\s)([^= "<>]+)(?=(\s|$))/g,'$1').replace(/ +( |$)/g,'$1')}${p3}`);
17
18console.log("▼置換後");
19console.log(html_置換後);

text
1▼置換前
2<html>
3    りんごは おいしい です
4
5    <div class="class1 class2" data-mydata="" data-mydata2 data-mydata3="999" data-mydata4 data-mydata5></div>
6
7    <textarea class="class1" readonly></textarea>
8    <textarea readonly class="class2"></textarea>
9</html>
10
11▼置換後
12<html>
13    りんごは おいしい です
14
15    <div class="class1 class2" data-mydata="" data-mydata3="999"></div>
16
17    <textarea class="class1"></textarea>
18    <textarea class="class2"></textarea>
19</html>

teratail でどなたかがたまにおっしゃってる XY 問題な気がします。
本質的にやりたいことに対して（必要なライブラリの足りない） gas でやることが妥当なのか、gas を使うとしてその解決として xmlservice が正しいのか（以前の質問では parser が使えると書いておられました）疑わしいように思いました。

投稿2020/04/08 13:39