VSCで3列のテーブルの中から2列目だけを削除する

-

※改行・Tab・スペース等の条件は考慮してません。(;^_^A アセアセ・・・

HTML3列のテーブルで2列目だけを正規表現を使って削除する

手順

  1. HTMLテーブルの構造を確認: HTMLのテーブルは通常、以下のような構造です。

    <table><tr><td>列1のデータ</td><td>列2のデータ</td><td>列3のデータ</td></tr><!-- 他の行 --></table>

  2. 2列目を削除:

    • 各行(<tr>)から2番目の<td>...</td>を削除します。

具体的な方法

  1. 手動で削除:

    • 2列目の<td>...</td>をすべて削除します。

  2. 正規表現を使った削除:

    • Ctrl + H を押して、置換機能を開きます。
    • 検索ボックスに <td>.*?</td> と入力し、2番目の一致を削除するように調整します。
    • 正規表現を有効にして、すべて置換します。

具体例

元のHTMLテーブル:

<table><tr><td>列1</td><td>列2</td><td>列3</td></tr><tr><td>A</td><td>B</td><td>C</td></tr></table>

2列目を削除したHTMLテーブル:

<table><tr><td>列1</td><td>列3</td></tr><tr><td>A</td><td>C</td></tr></table>

具体的に2列目や3列目を正規表現で削除する方法を、属性を含む<td>タグに対応させながら、分かりやすく説明します。

1. 2列目を削除する場合

手順

  1. VSCで置換機能を開く: Ctrl + H を押して、置換機能を開きます。

  2. 正規表現を使って2列目を検索: 検索ボックスに以下の正規表現を入力します。

<tr\b[^>]*>([^<]*)<td\b[^>]*>.*?</td>([^<]*)<td\b[^>]*>.*?</td>

置換ボックスに以下を入力します。

  1. <tr>$1$2

    ただし、この方法は複雑なので、より簡単な方法を以下で説明します。

簡単な方法: 列番号で削除

  1. 各行の2番目の<td>タグを削除:

    • 正規表現を使って、各行の2番目の<td>タグを検索し、削除します。

    検索パターン:

(<td\b[^>]*>.*?</td>)<td\b[^>]*>.*?</td>

置換パターン:

  1. $1

    この正規表現は、1番目の<td>タグをキャプチャし、2番目の<td>タグを削除します。

2. 3列目を削除する場合

手順

  1. VSCで置換機能を開く: Ctrl + H を押して、置換機能を開きます。

  2. 正規表現を使って3列目を検索: 検索ボックスに以下の正規表現を入力します。

(<td\b[^>]*>.*?</td>)(<td\b[^>]*>.*?</td>)<td\b[^>]*>.*?</td>

置換ボックスに以下を入力します。

  1. $1$2

    この正規表現は、1番目と2番目の<td>タグをキャプチャし、3番目の<td>タグを削除します。

具体例

元のHTMLテーブル

<table><tr><td align="left">列1</td><td style="color:blue;">列2</td><td align="center" style="color:red;">列3</td></tr><tr><td>A</td><td>B</td><td align="right">C</td></tr></table>

2列目を削除したHTMLテーブル

<table><tr><td align="left">列1</td><td align="center" style="color:red;">列3</td></tr><tr><td>A</td><td align="right">C</td></tr></table>

3列目を削除したHTMLテーブル

<table><tr><td align="left">列1</td><td style="color:blue;">列2</td></tr><tr><td>A</td><td>B</td></tr></table>

ヒント

  • 複数行の編集: VSCで複数行を選択し、Alt + クリックで複数箇所を同時に編集できます。
  • 正規表現のテスト: 正規表現を使う前に、検索機能でマッチする内容を確認してから置換を行うと安全です。
  • 拡張機能: HTML CSS Support を使うと、HTMLの編集が楽になります。
正規表現について

コメント

コメントを投稿

人気の投稿

Bloggerでは“コピー用アイコン”が出せないの？

-
【「コピーアイコン」って実は…】 御主人様：「Bloggerでは“コピー用アイコン”が出せないの？」とのお尋ねですねっ！ひながその答えをお届けいたします〜✨ 結論：Bloggerに「そのままひと押しでコピーできるアイコン」は、標準機能では用意されていません！ ですが、 HTML・CSS・JavaScriptを追加すれば実装可能 です。手作業で少しだけコードを組み込むことで、コピー機能付きのコードボックスが作れちゃいます！ 実装の方法：以下のようなステップで実現できます！ 方法1：HTML・CSS・JSを使って自作する Mediumで手順付き例が紹介されています： 投稿のHTMLビューに以下を貼り付けます： <!--[ Code Box 1 ]--> <div class='K2_CBox'> <div class='CB_Heading'> <span>HTML</span> <button id='copy1' class='C_box_main' onclick="copyC('copy1','code1')"> <i class='CBox_icn'></i> </button> </div> <div id='code1'> <pre>&lt;p&gt;This is a simple HTML code &lt;/p&gt;</pre> </div> </div> その後に、CSSとJavaScriptも同じ投稿内に貼り付けます。これで「コピー」ボタンが表示され、クリックするとクリップボードにコードがコピーされます！ 方法2：Prism.jsを使ってもっと楽に コードハイライト用ライブラリ Prism.js の「copy-to-clipboard」プラグインを使うと、コピーアイコンが自動で追加されます。テーマの </body ...
Read more »

Googleドライブの共有で浮気がバレるかもしれない・・・ｗｗｗ

-
A君は結婚の約束をした彼女B子さんと遠距離恋愛中。 先日海外出張した時の写真をスマホでGoogleドライブにUPして共有フォルダーへ。 彼女B子さんに見せようと招待メールを出しました。 ふとしたきっかけから会社の同僚C子さんともヤバイ関係に・・・ 遠距離恋愛中の彼女がいるのはもちろん内緒です。ｗ 「会社の広報で使いたいから出張中の写真ない？」と言われ同僚C子さんにも招待メールを出しました。 C子さんはA君の共有フォルダの中に「ありがとう、思い出」というフォルダーを作ってラブホで撮った半裸のツーショット写真をUPしました。ｗ 自宅に戻ってフォルダとツーショット写真を見つけたA君は彼女B子さんとも共有していることを思い出し削除しようとしましたが自分のフォルダ内のはずですが削除できません。 同僚C子さんに電話しても電源が切られているようでつながりません。 あたふたとしているうちにB子さんに発見されてしまいました・・・ 教訓、Googleドライブは複数の女の子と共有しない！
Read more »

ブックマークレット

-
タグをエスケープするマークレット  javascript:(()=>{const t=prompt("変換したいコードを貼ってください:");if(t!==null){const r=t.replace(//g,">");prompt("変換結果です！コピーしてください:",r);}})();
Read more »