Fly higher! Sky is the limit!

webの現場で働く人のブログ

JavaScriptで複数ワード検索 品質向上を目指す。

f:id:paradox_tm:20170209163001p:plain

Webサイトを構築する上で必ずルールが存在します。
そのルールの1つが表記。

納品前の成果物に対して「表記揺れ」や「禁止ワード」を効率よく確認できないものかと思いJavaScriptで実装してみました。

イメージ的にはChrome拡張機能goodbye “Zenkaku” - さよなら全角英数」を意識しております。
全角英数のみであればこの拡張機能だけでよいのですが、それぞれのサイトによってルールが違うので【調べたいワード】が指定できるものを考えてみました。
※ 【調べたいワード】はJavaScriptにて指定
jQuery使用

DEMO

See the Pen JavaScriptで複数検索 by paradox_tm (@takumaro-web) on CodePen.

ロジック

  1. ワードを指定する。
  2. 親要素(id、classなど)を指定しその中のhtmlの記述をeachで指定されたワード分だけ探しにいく。
  3. 指定されたワードがあった場合、<b>タグで囲み強調させる。
  4. 検出されなかった場合、アラートを出す。

自分が運用しているサイトにあったブックマークレットを作成するとさらに効果的!

  1. ワードを指定する。
  2. 圧縮する。 ※ JSの頭に「javascript:」をつける。
    URL:https://syncer.jp/js-minifier
  3. 検索したいページでブックマークレットをポチッ。

サンプルソース

圧縮前

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")}})})();

このブログで実行したイメージ

f:id:paradox_tm:20170209163022p:plain

「おッ、jQueryに反応してる!」

以上です。では、また。