過去に
EFO(EntryFormOptimization)サービスを作った経験で、ページ内の入力フォームの文字列を、色々とマッチングさせる処理を作ってきたのですが、その時のマッチングプログラムが実はあまりイケていなかったので、正規表現マッチングと文字抽出を少し勉強したので、そのメモを記載します。
そして、javascriptでは、たくさんの方法でEFOを実現できることもわかったので、それもまとめておきます。
色々なマッチング方法
1. 文字列.match(検索文字列)
任意の文字列が含まれているかの確認
"abcdefg".match("cd")
> 0:"cd"
> groups:undefined
> index:2
> input:"abcdefg"
> length:1
"abcdefg".match("ce")
> null
検索文字列には正規表現も使えるので、戻り値を取得して便利に使えます。
2. 文字列.indexOf(検索文字列)
任意の文字列が、何文字目に存在するかを確認できます。
"abcdefg".indexOf("cd")
> 2
"abcdefg".indexOf("ce")
> -1
"あいうえお".indexOf("う")
> 2
２バイト文字の場合の返り値は、文字数ベースの値になるので、マルチバイトで使う際には注意する必要があるかもしれませんね。
3. RegExp(正規表現)
正規表現をきちんと記述して文字列検索を行えます。
var reg = RegExp("う");
reg.exec("あいうえお");
-- [res]
0:"う"
groups:undefined
index:2
input:"あいうえお"
length:1
なんとなく、matchと同じレスポンスなので、基本的な使い方は同じであることがわかります。
new宣言したRegExpは、matchの検索文字として使用する事も可能なので、execでもmatchでもどちらでも良さそうです。
あと、さらに類似の書き方として、下記の様にもできます。
var reg = /う/;
reg.exec("あいうえお");
-- [res]
0:"う"
groups:undefined
index:2
input:"あいうえお"
length:1
他の言語との兼ね合いを考えると、こちらの方がしっくりくる人も多いでしょうね。
WEBページで使えそうなサンプルを作成
1. ページタイトルの取得
var reg = new RegExp("(http[s])://(.*?)/");
reg.exec(location.href);
この記事を読んでいる優秀なあなたは、"document.title"で簡単にページタイトルが取得できる事に気がつくかもしれませんが、あくまでサンプルです。
2. URLのドメインとプロトコルを一括取得
var reg = new RegExp("(http[s])://(.*?)/");
reg.exec(location.href);
--[res]--
0:"https://wordpress.ideacompo.com/"
1:"https"
2:"wordpress.ideacompo.com"
groups:undefined
index:0
input:"https://wordpress.ideacompo.com/wp-admin/post-new.php"
length:3
このスニペットも、"location.host"と"location.protocol"で取得できることに気が付いたかもしれません・・・あくまでサンプルです。
3. ページ内の複数ある<h2>タグを複数検索
var res,reg = /<h2>(.*?)<\/h2>/ig;
while(res = reg.exec(document.body.innerHTML)){
console.log(res[1])
}
このwhileを使う方法を覚えておけば、かなり便利な文字検索ができるはずです。
しかし注意点としては、正規表現のgオプションをつけ忘れると、このプログラムでは無限ループしてブラウザが逝ってしまいます。ご注意ください。
EFOに見る正規表現の利便性
WEBページにはSEOやEFOは必須対策としていますが、周辺要素が影響するSEOに比べて、EFOは技術的な要素が強く、サイト内のプログラムできちんと制御してあげなくてはいけません。
EFOは、必須入力欄の入力確認だけではなく、下記の様な要素があります。
1. メールアドレス
2. ひらがなカタカナ
3. URL
4. 郵便番号や電話番号の文字数や半角全角
5. 想定外の文字タイプ（電話番号のハイフン区切りなど）
他にもEFOには要素があるのですが、正規表現でできるレベルは、上記の他にもたくさんあるので、独自にjavascriptできちんと対応するのが望ましいでしょう。
ちなみに、正規表現で検索した文字列を差し替える場合は、以前にブログを書いているので、合わせてご覧ください。
[Javascript] 正規表現を使って複数の文字列置換を一発でやる方法
