HTML属性がダブルクォーテーションで囲まれていないものを正規表現で検索置換しダブルクォーテーションで囲むには？

Question

HTML属性がダブルクォーテーションで囲まれていないものを正規表現で検索置換しダブルクォーテーションで囲むにはそうしたらいいですか？

出来ればDwで検索置換したいです
例
<a href=aaa.html class=bbb></a>
を
<a href="aaa.html" class="bbb"></a>
としたい
一度に出来なくてもいいです
href classと順を追って置換してもOKです

正規表現で実現できそうですが方法がわからず。。。

詳しいかたご教示下さいm(_ _)m

Comments

[mattn]

前提条件を書いて下さい。エディタなのか、perl なのか、vim なのか、など。

[otn]

正規表現では、文字列の検索（マッチ）しかできません。置換するにはなんらのプログラミング言語やツールが必要です。

[m.ts10806]

3回くらい読んでようやく気づきました。Dwとさらっと書いてありますが、タグに追加した方がいいですね。質問本文でも出来れば正式名称（あとバージョンとか）で書いていただきたいところ。というより、なぜダブルクォートで囲われていないHTMLが出来上がったかというところにこの問題の本質があるのでは・・・。

[mattn]

あー、Adobe Dreamweaver かw

[hyksm]

すみません。Dw　＝　Adobe Dreamweaver　でした。

Answer 1

この質問に対して皆さんが様子を見ている理由は、「正規表現はこれです」と一つ返事で言えないからです。
HTML の ダブルクォートされていない属性部分 にマッチさせて置換するとなると、単純に

(\s[a-zA-Z0-9-]+)=([^" >]+)

を検索し、それを $1="$2" で置換すればそれっぽく動作しますが、HTML でないテキストの中に似たパターンがあり誤爆しかねません。出来ればパターンの中に < や > を含んでタグの一部としてマッチさせ誤爆を防ぎたいのです。ですがそれには「パターンには含むが置換対象としては外す」という場合に使う特殊な記法が必要になります。その特殊な記法が perl や ruby や vim によって異なります。また置換の際の後方参照文字も異なります。Visual Studio Code では $1 や $2 ですが、エディタや言語では \1 や \2 だったりします。Dreamweaver は持っていませんので確認出来ませんが、どちらかで動作すると思います。

上記のパターンで検索/置換しても、おそらく動作するかと思いますが、誤爆が無いとは断言できません。あくまで質問文にあった HTML での動作確認だけしかしていません。 必ずバックアップを取ってから お試し下さい。

なお、パターンの説明をしておきます。

() で括ったのは属性名と属性値です。あえて属性名をマッチさせ、置換文字列にも含む($1)事で誤爆を防いでいます。属性名の先頭に空白を含んでいるのも誤爆を防ぐためです。
属性値の方は

• ダブルクォートでない
• タグの終わりでない
• 空白でない

でマッチしています。これにより

<a href=aaa.html class=bbb></a>

href にも class にも作用する様にしています。

こんな説明でお分かり頂けますか？

Comments

[hyksm]

Dwでも＄1＝”＄2”で行けました！ありがとうございます

Answer 2

クォートで括られていない属性値

クォートで括られていない属性値を置換するには

• 開始タグの中に存在する
• 属性値がクォートで括られていない

の2段階を踏む必要がある為、一度の正規表現の置換処理では実現できません。
正規表現では一度消費したものをもう一度、消費する事は出来ないからです。

コード(JavaScript)

この機能を実現するには HTML 文法をよく知っている必要があります。
個人的には正規表現でやるものではないように思いますがHTML Standard の仕様を軽く読んで作ったコードで良ければ、下記コードをどうぞ。

• 12.1.2.3 属性 - HTML Standard 日本語訳

'use strict';
var htmlString = `<a href=aaa.html class=bbb>foo</a>
<a href="aaa.html" class="<>">foo</a>
<a href = aaa.html class = 'bbb'>foo</a>
<a data-attribute = "href=aaa.html" data-attribute2 = 'class=bbb'>foo</a>`;

htmlString = htmlString.replace(/<\w+(?:\s+[\w-]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^=\s<>"']+))?)+/g, function (startTag) {
  return startTag.replace(/(\s+[\w-]+\s*=\s*)(?:"[^"]*"|'[^']*'|([^=\s<>"']+))/g, function (string, name, value) {
    return value ? name + '"' + value + '"' : string;
  });
});

console.log(htmlString);

Re: hyksm さん

Answer 3

タグの中身かどうかをチェックするのはとりあえず面倒なのでパスして
=につづくクォーテーション以外の文字を変更するならこんな感じでしょうか？

検索文字：/(?<=\w=)[^"'\s>]+/
置換文字："$0"

Answer 4

chromeとかで開いて、デベロッパーツールのElementsの内容コピーアンドペーストすれば
だいたい"で囲ったHTMLが得られると思いますよ。

追記：
DWでとなっているので、回答にはなっていないかもしれません。

Comments

[hyksm]

そういう手がありましたか！参考にさせて頂きます

Answer 5

(Dreamweaverはわかりません)

replace(/(\s[a-zA-Z0-6]+)=([^'"][^\s>]+)/g, '$1="$2"')

これ、難しくないですか？
タグ内だけと条件付けても以下で破たんします

<a title=" class=bbb " href="aaa.html">test</a>