以前作ったJSのUTF-16をSJISに変換するサンプルが時代の波にモマれ動かなくなってたので作り直し。
それにつけても非推奨が増える一方な感じがするJS。
同様に正規表現のデバッガも動かなくなっていた。(【javascript】 RegExp 正規表現のデバッガ)
でも正規表現で名前付きキャプショングループを使える様になってきたみたいだから良しとしよう。
※2016年の記事(9年も前か!)だし、単に使いこなせなかったかもしれないけどね。
今回は名前付きキャプショングループのおかげで内容をとても単純になった。
正規表現の/…/の中のパターンとオプションを手入力して【チェック】ボタンを押すと
new RegExp({正規表現パターン}, {オプション})
が動き、RegExpオブジェクトのプロパティを画面下の結果欄に表示する。
だけのハズだったが、
実際 サンプルをRegExe.execメソッドに与えてみないと
文法上正しいだけの正規表現になってしまうので、
【RegExp.exec(サンプル)をループ実行】ボタン
whie(true) {
if({正規表現パターン}.exec({サンプル}) {
#結果に出力を追記
} else {
break;
}
{無限ループチェック}
}
を追加した。
空の正規表現パターンを無限ループ内のexecメソッドに与えると空振りし続け
CPUファンが最大回転数になる上にブラウザが「メモリが~メッセージ」を出すので
空回りしない様にしてる。(つもり
名前付きキャプチャグループ名をCSSの色名にすれば、replaceメソッドに正規表現とリプレッサーを組み込めば、簡単にテキストの色付けができる様になってた。(笑
前回の苦労は何だったのかな?(只の徒労だな(昔は大変だったよね?(笑って忘れよう
【名前付きキャプチャグループ名で色付け】ボタン
{サンプル} .replace ( /{正規表現パターン}/{オプション} , {名前付きキャプチャグループ名で色付けする処理} )
も追加した。
正規表現パターンを拡張しテキストの文字を全て色付けできたら「完成」なんだろうなぁ~
正規表現パターンが完璧なのにテキスト中に色指定無しがあれば、多分「シンタックスエラー」だから
replaceで「<span style=”color: xxx”>・・・</span>」部分を消去すれば、エラってる箇所を抽出できそうダケど、色指定をdarkgrayに差し替えるか色指定が無い部分に下線属性を付加した方が見つけやすそう。
正規表現の最後に何でもヒットするパターンに下線の名前を付ければ、
(?<blue>true)|(?<red>false)|(?<green>\d+)|(?<underline>.+)
で
aaaatruebbbbfalsecccc1234dddd
を色分けしてみると?
予想外の部分に下線が付くと思ったら、全部下線が付いてしまった(合掌
ま、気軽に進めよう(笑
以下、サンプルデータ。
(?<blue>true)|(?<red>false)|(?<green>\d+)
aaaatruebbbbfalsecccc1234dddd
最後に画面が寂しいのでtitleとplaceholder属性を追記した。
今はtitle内容を改行して表示させるには\nと書いてもブラウザが”\n”と思ってしまうので、
テキストエディタ上で直にLFコードを入れる(Enterキー押下)しかなけど、気が付いたら\nって書けば改行してくれる様な気がする。
最近のテキストエディタは「Enterキー」入力をCR、LF、CRLFのいづれかに変更する機能を持つものが多いので何とかなるけどね。