VS CodeでHTMLタグだけ削除して中のテキストを残す！正規表現を使った一括置換テクニック

どうも、こんにちは。
Webデザイナーのなお（@ENOWL_Nao）です。

コーディングをしていると、「特定のHTMLタグだけ削除して、中のテキストや数字はそのまま残したい！」 という場面、ありませんか？

例えば、数千行あるリストの中で「特定のクラスがついた<span>タグだけを消したい」みたいな時です。これを手作業でポチポチ消していくのは、さすがに大変ですよね…。

実はこれ、VS Codeの「正規表現」という機能を使えば、一瞬で解決できます！
今回、作業中にこの機能がめっちゃ便利だったので、備忘録として手順をまとめておきます。

同じように「タグだけ消したい！」と困っている方の参考になれば嬉しいです！

やりたいこと：HTMLタグを消して中身を残す

今回やりたいのは、以下のような置換です。

▼ 置換前

<p>価格：<span class="price">1,980円</span></p>

▼ 置換後

<p>価格：1,980円</p>

<p>タグなどの周りの構造は壊さずに、不要になった <span class="price">...</span> だけを綺麗に取り除き、中の「1,980円」という文字だけを残します。

実際に試してみよう（テスト用コードあり）

説明を読むより手を動かした方が早いので、実際にVS Codeで試せるテストコードを用意しました！
以下のHTMLをVS Codeの新規ファイルにコピペしてください。

この中にある <span class="price"> と </span> だけを削除して、金額だけの状態にしてみましょう！

▼ 練習用ソースコード

<ul>
  <li>商品A：<span class="price">980円</span></li>
  <li>商品B：<span class="price">1,200円</span></li>
  <li>商品C：<span class="price">3,500円</span></li>
  <li>商品D：<span class="price">12,800円</span></li>
  <li>商品E：<span class="price">500円</span></li>
</ul>

正規表現で一括置換する

それでは、VS Codeの置換機能を使ってサクッと修正します。
手順は以下の3ステップです。

ステップ1：置換ウィンドウを開く

対象のファイルを開いた状態で、置換ウィンドウを表示します。
ショートカットキーを使うと早いです。

• Windows: Ctrl + H
• Mac: Cmd + Option + F

ステップ2：正規表現モードをONにする

検索ボックスの右端にある .* のマーク（正規表現を使用）をクリックして、オン（ハイライトされた状態）にします。

これ重要です！
忘れると動きません…。

ステップ3：検索と置換を入力して実行

それぞれの欄に、以下のコードを入力してください。

▼ 検索（Search）

<span class="price">(.*?)</span>

▼ 置換（Replace）

$1

入力できたら、「すべて置換（All）」ボタンを押します。
すると、一瞬でタグだけが消えて、中の金額だけが残りましたよね？

感動です！

失敗しないためのポイント

何が起きているのかざっくり解説します。

• (.*?) これは「タグの中にあるあらゆる文字」をグループとして記憶しておいて！という命令です。
• $1 これは「さっき検索で記憶した 1番目のグループ（中身の文字） だけをここに残して！」という命令です。

<p>おすすめは<span class="price">500円</span>のランチと、<span class="price">980円</span>のディナーです。</p>

【応用編】div、aタグなど様々なケース

このテクニックはspanタグ以外でも使えます。
要領はすべて同じです。

ケース1：不要なdivタグを削除する

クラスがついたdivだけ消して、中身のコンテンツをフラットにしたい場合。

▼ 練習用ソースコード

<div class="wrap">ここは残したいテキストです。</div>
<div class="wrap">ここも残します。</div>

• 検索：<div class="wrap">(.*?)</div>
• 置換：$1

ケース2：リンク(aタグ)を無効化してテキストにする

リンクだけ外して、文字は残したい場合。
href の中身がバラバラでも対応できるように書きます。

▼ 練習用ソースコード

<ul>
  <li><a href="https://example.com/page1">リンク1（テキストだけ残す）</a></li>
  <li><a href="https://example.com/page2" target="_blank">リンク2（これもテキストだけ）</a></li>
</ul>

• 検索：<a href=".*?">(.*?)</a>
• 置換：$1

ポイントは、href=".*?" のように、属性の中身も正規表現（.*?）にしてしまうことです。これでリンク先が異なっていても一括でマッチします。

まとめ

今回は、VS Codeの正規表現を使って、HTMLタグだけを削除して中身を残す方法を紹介しました。

• VS Codeの置換は 正規表現モード（.*） を使うと最強
• 検索に (.*?) を使い、置換に $1 を使うのがポイント
• 「?」を忘れると巻き込んで消えちゃうことがあるので注意
• divタグやaタグなど、他のタグでも応用OK

これを知っているだけで、修正作業のスピードが爆上がりしますので、ぜひ活用してみてくださいね！

最後まで読んでいただき、ありがとうございました！
では、また！

個人事業主さまの「Web担当」

そのWebの悩み
一人で抱え込んでいませんか？

「ちょっとここを直したい」「そろそろリニューアルしたい」…。
小さな修正から本格的な制作まで、Webに関する「どうしよう」を私が丸ごと受け止めます。難しい専門用語は使いません。
あなたの事業を支えるパートナーとして、まずは気軽にお話ししませんか？

ココナラで相談する

なお

Webデザイナー

XInstagramContact

ホームページをご覧いただきありがとうございます！ なおと申します。 現在はフリーランスのWebデザイナーとして活動しています。 WebデザインからコーディングからWordPress実装まで一貫してホームページ制作を行うことができます。