html文字列の正規判定とマッチングの具体的な利用方法について

前文

最近、html文字列を渡す必要があるコンポーネントを書いていて、htmlタグかどうか、タグ内のテキストと一致するかどうかなど、いろいろなルールを使って判断していました。以下はそのメモです。

入力される文字列が閉じたhtmlタグを含んでいるかどうかを判断する方法

• /<\/? [a-z][\sS]*>/i

これは実際にはタグ閉じの完全性や順序などを判断しているわけではなく、文字列の中にhtmlタグ（カスタムタグを含む）があるかどうかを判断しているだけなので、それで十分なんです。これなら、文字列の中にあるものをすべて[˶‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾‾┛︎と覚える必要がないですね。

• /<([a-z][\s\S]*)>. *<♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪♪

こちらは、完全に閉じたタグに合わせるために、もう少し標準化され、 \1 は前の括弧で捕らえられたものを表し、より高度な正規の使い方をしています。

タグの中のテキストにマッチさせる方法

str = str.replace(/<title>[\s\S]*? <\/title>/, '<title>' + newTitle + '<\/title>');

• マッチングはセマンティックタグやカスタムタグで行うのがよいでしょう。このように1つの文字列にいくつも入っているようなdivを使うと、いろいろと問題が出てきます。
• 任意の文字に対応する[sS]*。
• * の後に ? を付けると非貪欲モードになります。

概要

htmlタグのテキストマッチにregularを使うのは、実は非常に非効率な方法で、必要な時まで使う必要はなく、この動作を深く批判している記事があります。

<スパン 一般的な正規表現

漢字にマッチする正規表現。[u4e00-u9fa5] です。  
コメント 中国語のマッチングはまだまだ頭を悩ませるところですが、この表現なら大丈夫!
全角文字（漢字を含む）にマッチングします。[^x00-xff]
コメント：文字列の長さを計算するのに使える（ダブルバイト文字は2、ASCII文字は1とカウントされる）
空白行にマッチする正規表現：ns*r
コメント：空白行を削除するために使用することができます
HTMLタグにマッチする正規表現： <(S*?) [^>]*>. *? |<. *? />
注：ウェブで出回っているバージョンは非常にひどいので、上のものは部分的にしかマッチせず、複雑なネストされたタグについてはまだ何もできない。
最初と最後の空白文字にマッチする正規表現。^s*|s*$
コメント 行頭と行末の空白文字（スペース、タブ、改ページなどを含む）を取り除くのに非常に便利な表現です。
メールアドレスにマッチする正規表現：w+([-+.] w+)*@w+([-.] w+)*.w+([-.] w+)*.
コメント フォームバリデーションの際に便利
URLにマッチする正規表現。^(http|https):\/[↵] +([↵] ,@? ^=%&amp;:/~~+#]*[\w-@? ^=%&amp;/~+#]) $?
コメント ネットで出回っているバージョンは機能が非常に限られており、上記のものは基本的にニーズを満たしている
口座番号が適法かどうかを照合する（文字で始まる、5～16バイトを許容、英数字のアンダースコアも許容）。^[a-zA-Z][a-zA-Z0-9_]{4,15}$
コメント フォームバリデーションに便利
国内の電話番号のマッチング：d{3}-d{8}|d{4}-d{7}。
コメント 0511-4405222や021-878822などのマッチングフォーム
テンセントQQ番号に一致するもの [1-9][0-9]{4,}
解説 テンセントQQの数字が10000からスタート
中国の郵便番号に一致するもの [1-9]d{5}(? !d)
コメント 中国の郵便番号は6桁
マッチングID: d{15}|d{18}
コメント 中国のIDカードは15桁または18桁
適合するIPアドレス：d+.d+.d+.d+.d+.d+.d+.d+.d+.d+.
コメント：IPアドレスを抽出する際に便利です。
特定の数字にマッチします。
　　^[1-9]d*$ // 正の整数にマッチします。
　　^-[1-9]d*$ //負の整数にマッチする
　　^-? [1-9]d*$ //整数のマッチング
　　^[1-9]d*|0$ //負でない整数（正の整数＋0）にマッチします。
　　^-[1-9]d*|0$ // 非正整数（負整数＋0）にマッチします。
　　^[1-9]d*.d*|0.d*[1-9]d*$ //正の浮動小数点数値にマッチします。
　　^-([1-9]d*.d*|0.d*[1-9]d*)$ // 負の浮動小数点数にマッチします。
　　^-? ([1-9]d*.d*|0.d*[1-9]d*|0?.0+|0)$ // 浮動小数点数のマッチング
　　^[1-9]d*.d*|0.d*[1-9]d*|0?.0+|0$ //非負の浮動小数点数（正の浮動小数点数+0）にマッチします。
　　^(-([1-9]d*.d*|0.d*[1-9]d*))|0?.0+|0$ // 非正の浮動小数点数（負の浮動小数点数+0）にマッチします。
解説：大量のデータを扱うときに便利、特定用途の補正に注意
特定の文字列に一致させる。
　　^[A-Za-z]+$ // アルファベット26文字で構成される文字列にマッチします。
　　^[A-Z]+$ //大文字の26文字からなる文字列にマッチします
　　^[a-z]+$ //アルファベット小文字26文字からなる文字列にマッチします。
　　^[A-Za-z0-9]+$ // 数字とアルファベット26文字で構成される文字列にマッチします。
　　^w+$ //数字、26文字、アンダースコアからなる文字列にマッチします。
RegularExpressionValidator検証コントロール使用時の検証関数とその検証式は以下のとおりです。
数字のみ入力可能："^[0-9]*$"
n桁の数字のみ入力可能： "^d{n}$"
最低でもn桁までしか入力できない："^d{n,}$"
m-n桁のみ入力可能： "^d{m,n}$"
ゼロおよび非ゼロの開始桁のみ入力可能： "^(0|[1-9][0-9]*)$"
小数点以下2桁の正の実数のみ入力可能： "^[0-9]+(. [0-9]{2})? $"
小数点以下1〜3桁の正の実数のみ入力可能： "^[0-9]+(. [0-9]{1,3})? $"
ゼロでない正の整数のみ入力可能： "^+? [1-9][0-9]*$"。
ゼロでない負の整数のみ入力可能： "^-[1-9][0-9]*$"
長さ3の文字のみ入力可能： "^. {3}$"
26文字で構成される文字列のみ入力可能： "^[A-Za-z]+$"
大文字26文字で構成される文字列のみ入力可能： "^[A-Z]+$"
小文字26文字で構成される文字列のみ入力可能： "^[a-z]+$"
数字と26文字で構成される文字列のみ入力可能： "^[A-Za-z0-9]+$"
数字、26文字、アンダースコアで構成される文字列のみ入力可能： "^w+$"
ユーザーパスワード: "^[a-zA-Z]w{5,17}$"が正しい形式であることを確認します：文字から始まり、6文字以上18文字以下、文字、数字、アンダースコアのみを含むことが可能です。
文字が含まれていることを確認する ^%&',;=? $"など： "[^%&',;=? $x22]+"
漢字のみ入力可能です："^[u4e00-u9fa5],{0,}$"。
メールアドレスの検証: "^w+[-+.] w+)*@w+([-.] w+)*.w+([-.] w+)*$"
電話番号の確認："^((d{3,4})|d{3,4}-)?d{7,8}$"。
正しいフォーマットは、"XXXX-XXXX", "XXXX-XXXXXX", "XXX-XXXXXX" となります。
"XXX-XXXXXX"、"XXXXXX"、"XXXXXXXXXX"。
ID番号の確認（15桁または18桁）： "^d{15}|d{}18$"
12ヶ月の年号を確認する： "^(0?[1-9]|1[0-2])$" 正しいフォーマットは "01"-"09" と "1" "12" です。
月の31日を検証する： "^((0?[1-9])|((1|2)[0-9])|30|31)$"
正しい書式は "01" "09" と "1" "31" です。
漢字にマッチする正規表現です。[u4e00-u9fa5] となります。
全角文字(漢字を含む)にマッチします。[^x00-xff]
空行にマッチする正規表現: n[s| ]*r
HTMLタグにマッチする正規表現。/<(. *)>. *|<(. *) />/.
最初と最後のスペースにマッチする正規表現。(^s*)|(s*$) 

以上、本記事の全内容を紹介しましたが、学習の一助となり、さらにスクリプトハウスを応援していただければ幸いです。