はじめに
正規表現を使って文字列の置換を行おうとした場合、いつもスムーズに行かなくて困っています。パターンをどういう風にしたらいいのかと迷ってしまいます。そのため、毎回、ネットでパターンのサンプルを探しながら試行錯誤しています。いつも、正規表現の一覧表をみながら初心に戻って学習しながらのパターン作成になります。効率が悪い方法ですが、正規表現はしばらくするとその時は覚えたパターンでもすぐに忘れてしまうことです。
複雑なパターンになると、まるでパズルのような、暗号のようなパターンになっています。
これほど、記憶に残らない文字列も珍しいのではないでしょうか。.*?=とか何が何だか、これでは忘れやすいのも当然です。そのため、もう覚えないことにしました。
そのかわりに、いつでも正規表現を確認できるプラグインを作成しました。
正規表現確認プラグイン
正規表現の動作確認をするポップアップを表示して、そこで、置換パターンの入力と置換文字列を入力して、置換実行ボタンを押すと、置換結果がその下に表示されるものです。
以下にそのサンプル画面を表示します。
操作方法
任意のwebページ(yahoo!JAPA等の)で、カーソルをボタンやリンクテキスト上に乗せて、ctrl+clickします。
すると、pop画面を表示して、対象データブロックにカーソルで選択したエレメントのhtmlデータが表示されます。この表示では、<>はエスケープ文字になっています。ここで、表示された文字列をある文字列に置換したい場合は、下の正規表現ブロックにある、テキスト領域にパターンと置換文字を入力し、置換実行ボタンを押すと置換結果ブロックに置換結果が表示されます。
この操作で、いろいろなパターンを入力して正規表現の動作確認ができます。
パターンにはgフラグが設定されていますので、繰り返し置換もできます。
試しに、パターンに、class=を設定して、置換文字にクラス=を入力して置換してみます。その結果が以下の画面です。
置換結果を見ると、クラス=に置換されていることがわかります。gフラグのため、すべてのclass=が置換されています。
プラグインのダウンロード
RegularExpプラグインのダウンロード
ここをクリックすると、ダウンロードするフォルダー画面が表示されますので、任意のフォルダーへダウンロードします。つぎにzipファイルを任意のフォルダーを指定して解凍します。chromeの拡張機能で、「パッケージされていない拡張機能ボタン」でそのフォルダーを指定して、インストールできます。
content.js(スクリプトファイル)
/**********************************************************************
*正規表現プラグイン
*content.js
*機能
*(1) 選択したエレメントのhtmlビュー
* ctrl+clickでpop画面に表示します。
*
*あらかじめ、jquery.jsをロードしています。
***********************************************************************/
let Itimer;
let count;
let ddd = "正規表現で置換中です。";
let html;
/***********************************************************************
*ポップ画面を追加
*3つのブロックを表示
*対象データブロック
*正規表現データブロック
*置換結果データブロック
*
*************************************************************************/
/************************************************************************
*htmlspecialchars()変換
*htmlの<>をエスケープします。
*
*************************************************************************/
function htmlspecialchars(unsafeStr){
console.log("11行");
let safeStr = unsafeStr.replace(/&/g,'&')
.replace(/"/g,'"')
.replace(/'/g,"'")
.replace(/</g,'<')
.replace(/>/g,'>');
console.log("ここから、replace()スタート18行");
safeStr = safeStr.replace(/(.*?>)(.*?>)(.*?)<\/([span|div|h1])>(.*?)/g,"$1$2<span style='color:red;'>$3</span></$4>$5");
console.log("ここまで、replace()完了21行");
/******************************************************************
*いったん、エスケープ文字で表示
*
********************************************************************/
$("#pop_help")[0].innerText=safeStr;
return safeStr;
}
$("body").on('click',(e)=>{
//リセットしてから
if(e.ctrlKey===true){
html = $.ajax({
url: "https://favorite.tecoyan.net/slim/get_regularexp_html.php",
type: 'GET',
dataType: 'html',
cache: false,
//data: this.params,
async: false
}).responseText;
//#all_blkをアペンドする。
if($("#all_blk").length===0){
$("body").append(html);
}
//リスナー
$("#replace_btn").off('click');
$("#replace_btn").on('click',()=>{
alert("置換を実行します。");
/*
*replace_codeからreplace文字列を取得
*データはpop_helpの文字列で、置換の正規表現は、replace_codeから取得して、
*置換ボタンを実行すると結果が、result_blkへ表示されます。
*/
let str = $("#pop_help")[0].innerText;
let aaa = $('#replace_aaa')[0].value;
bb = new RegExp(aaa,"g");
let bbb = $("#replace_bbb")[0].value;
str = str.replace(bb,bbb);
$("#result_blk").html(str);
});
//表示にする。
$("#all_blk").css("display","block");
count = 0;
//
console.log("33行");
console.log("clickしました。"+e.target.parentElement);
/*********************************************************
*
*
*
***********************************************************/
ss = e.target.parentNode;
console.log(ss.parentNode);
console.log("clickしました。"+ss.parentNode);
//すでにあればスキップ
if($("#html_div").length === 0){
$("body").append(html);
}
$("#all_blk").draggable();
console.log("45行");
let dd = htmlspecialchars(ss.parentNode.innerHTML);
console.log("47行");
$("#pop_help")[0].innerText=dd;
//$("#result_blk")[0].innerText = "";
$("#html_div").css("display","block");
console.log("55行");
clearTimeout(Itimer);
//$("#replace_blk").css("display","none");
$("#replace_aaa").value = "";
$("#replace_bbb").value = "";
return false;
}else{
}
console.log("87行");
});
使用してみて
このプラグインを作成後、しばらく使用してみた感想を記述します。
最初に任意のwebページで試してみました。yahooサイトやアメバ、Qiitaサイトでもテストしました。いずれのサイトのページでも動作します。
https://サイトであれば、どのページでも動作するはずです。
次に、ページの任意のリンクテキストやボタンにカーソルを当てて、ctrlキー+clickするとpop画面が表示されます。
正規表現ブロックで、パターンと置換文字列を入力して置換実行ボタンを押すと、置換結果ブロックへ置換結果が表示されます。
選択したリンクテキストやボタンのhtmlコードによっては、多少表示するまで時間が、かかることがありますが、長くても7～8秒です。大抵は1～2秒で表示されます。
このツールで、様々なパターンのテストができるはずですが、まだ、十分テストしきれていません。ご容赦願います。
あとがき
このツールのメリットは、実際のwebページで文字列置換のテストができることです。とくに、様々なパターンのテストを事前の環境準備せずにその場で実行できることです。
世の中にもwebページで文字列置換のテストができるサイトは多々ありますが、実際のページを使ったツールはあまり多くはないかと思います。
この後も改良をつつけて行ければと思っています。