JavaScriptで複数ワード検索 品質向上を目指す。
Webサイトを構築する上で必ずルールが存在します。
そのルールの1つが表記。
納品前の成果物に対して「表記揺れ」や「禁止ワード」を効率よく確認できないものかと思いJavaScriptで実装してみました。
イメージ的にはChromeの拡張機能 「goodbye “Zenkaku” - さよなら全角英数」を意識しております。
全角英数のみであればこの拡張機能だけでよいのですが、それぞれのサイトによってルールが違うので【調べたいワード】が指定できるものを考えてみました。
※ 【調べたいワード】はJavaScriptにて指定
※ jQuery使用
DEMO
See the Pen JavaScriptで複数検索 by paradox_tm (@takumaro-web) on CodePen.
ロジック
- ワードを指定する。
- 親要素(id、classなど)を指定しその中のhtmlの記述をeachで指定されたワード分だけ探しにいく。
- 指定されたワードがあった場合、<b>タグで囲み強調させる。
- 検出されなかった場合、アラートを出す。
自分が運用しているサイトにあったブックマークレットを作成するとさらに効果的!
- ワードを指定する。
- 圧縮する。
※ JSの頭に「javascript:」をつける。
URL:https://syncer.jp/js-minifier - 検索したいページでブックマークレットをポチッ。
サンプルソース
圧縮前
javascript:(function(){ !function(d,f,s){s=d.createElement("script");s.src="//j.mp/1bPoAXq";s.onload=function(){f(jQuery.noConflict(1))};d.body.appendChild(s)}(document,function($){ /************************************************** * BOOKMARKLET by jQuery ***************************************************/ var str = [ "0","1","2","3","4","5","6","7","8","9", "A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","a","b","c","d","e","f", "g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z","jQuery" ]; //種類のカウント var count = 0; var cssCheck = function(reg,str){ $("#content").each(function(){ var txt = $(this).html(); //マッチした場合、置き換え if(txt.match(reg)){ //ハイライト $(this).html(txt.replace(reg,"<b style='background:#FFFF00;display:inline-block;font-weight:bold;'>"+str+"</b>")); count++; } }); }; //指定ワードのループ for(var i = 0; i < str.length; i++){ //変数を検知 var reg = new RegExp(str[i], 'g'); cssCheck(reg,str[i]); } //検出判定 countは種類を検知する if(count === 0) { alert("検出されませんでした(◍ ´꒳` ◍)b"); } //処理はここまで });})();
圧縮後
javascript:(function(){!function(c,b,a){a=c.createElement("script");a.src="//j.mp/1bPoAXq";a.onload=function(){b(jQuery.noConflict(1))};c.body.appendChild(a)}(document,function(e){var f=["0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F","G","H","I","J","K","L","M","N","O","P","Q","R","S","T","U","V","W","X","Y","Z","a","b","c","d","e","f","g","h","i","j","k","l","m","n","o","p","q","r","s","t","u","v","w","x","y","z","jQuery"];var d=0;var c=function(g,h){e("#content").each(function(){var i=e(this).html();if(i.match(g)){e(this).html(i.replace(g,"<b style='background:#FFFF00;display:inline-block;font-weight:bold;'>"+h+"</b>"));d++}})};for(var a=0;a<f.length;a++){var b=new RegExp(f[a],"g");c(b,f[a])}if(d===0){alert("検出されませんでした(◍ ´꒳` ◍)b")}})})();
このブログで実行したイメージ
「おッ、jQueryに反応してる!」
以上です。では、また。