【正規表現】HTMLの特定のクラスを持つタグを一気に変える【967日目】

HTMLの特定のクラスを変えたい

<span class="xxx-class">ringo</span>

これをこうしたい

<button type="button" class="xxx-class">ringo</span>

1. spanをbuttonタグに
2. type="button"を追加

結論

正規表現で置換

(<span)(.*)(xxx-class)(.*)(</span>)

<button type="button"$2$3$4</button>

正規表現で置換

まず、最初に該当するものを探す正規表現を書く

(<span)(.*)(xxx-class)(.*)(</span>)

そして、変える必要のない部分はそのままにしたい。
どう書くか。

置換する正規表現を考える

1. 全てをそのまま書く正規表現を書く
2. 必要な部分を変える

この発想で置換するものを書く。
以下VSCodeを使った場合のものなので、他の言語やツールだと $1部分を \1にしている可能性がある。

$1$2$3$4$5

このようにすると、数字が各（）に対応した中身になる。
これは、全てそのまま書いているので、置換しても何も変わらない。

なので、変えたいものを変えていく。

1. $1をspanタグから、buttonタグとtype="button"に変える
2. $5をspanタグからbuttonタグに変える

(<span)(.*)(xxx-class)(.*)(</span>)
<button type="button"$2$3$4</button>

これで正しく置換される。

このように、正規表現を使うと、複雑に見える変更も簡単に変更出来る。
変更箇所が多いときに便利φ(･･