背景
microCMSのapiで取得したhtmlで抜粋を作りたかったがhtmlタグが邪魔で文字数カウントができなかったので、
htmlタグをなくした文字列を取得したかった。
正規表現の記事ってあまり多くないので、他の方がCMSで文字列だけ抜き出したい！って時に役立つかなと思い初投稿してみました。
match()メソッドを使う
match()メッソドとは
正規表現に一致するものを配列で返す。
例：
const hoge = <p>来週の月曜日には、数量限定のグリーンビーンズの発送を予定しています。火曜日からローストビーンズを提供し ますが、数量に限りがありますので、お早めに。<br>
hoge.match(/。/g)
// 結果⇒["。","。"]
最後のgはオプションで、マッチしたすべての文字を返します。
(はじめ入れ忘れていて、先頭しかマッチしなかったなんて言えない…)
コード
const hoge = <p>あ<br><br>か<br>い</p>
hoge.match(/[^\<\>]+(?=\<[^\<\>]+\>)|[^\<\>]+$/g);
// 結果⇒["あ","か","い"]
解説
正規表現の肯定先読みを使っています。
肯定先読みはある条件にマッチした前を見て、その前の文字列がもう一つの条件と一致するか判定します。
例えば ある文字列の中でjavascriptの中のscriptを抜き出したいとすると
java(?=script)
となります。
これを<>で囲われたHTMLタグに応用すると
- マッチしたい文字列⇒
[^\<\>](">","<"以外の文字列) - 除外したい文字列⇒
\<[^\<\>]+\>("<>"で囲われた文字列)
肯定先読みの部分
↓
[^\<\>]+(?=\<[^\<\>]+\>)
+は前の表現が一回以上繰り返す場合マッチするものです。
要するに、
まず
"<>"で囲われた文字列を探して
その後、
">","<"以外の文字列が１回以上続いている箇所を検索
しています。
その後ろの
|[^\<\>]+$/g
は|は「または」という意味で
$は直前の表現が文字列の末尾にある場合マッチするもので
要するに、">","<"以外の文字列が文字列の末尾にあったらマッチするものです。
終わりに
初めての投稿でしたが、意外と時間がかからずかけました。
もし読んでくれた方で、わかりずらかったり、間違ってるところがあったらコメントで教えてい抱けると助かります。
正規表現は難しいですが、慣れてくると正規表現なしだと面倒になることも多いので、
億劫にならずに使う部分では、使っていきたいです。