JavaScriptの正規化表現

JavaScriptの正規化の例で「HTMLの難読化」を作ります。

HTMLの難読化といっても、ここでは改行の削除とコメントの削除をするだけです。

 

但し、幾つかの記述パターンで適切な変換がなされない場合があります。

変換後は、動作テストをして正しく変換したか確認して下さい。

 

index.html

<!DOCTYPE html>

<html>

<head>

  <meta charset="UTF-8">

  <style> textarea { background-color: #f0ffff; } </style>

</head>

<body>

  <h1>HTMLの難読化　簡易版</h1>

 

  <textarea id="src" rows="10" cols="80"></textarea><br>

  <button onclick="encodeJS()">実行</button><br>

  <textarea id="des" rows="10" cols="80"></textarea><br>

<script>

function encodeJS() {

  $("des").value = convert($("src").value);

}

 

// 変換処理

function convert(src) {

  // Script

  pr = src.match(/\<pre\>[\s\S]*?\<\/pre\>/g);

  sty = src.match(/\<style\>[\s\S]*?\<\/style\>/g);

  scrip = src.match(/\<script\>[\s\S]*?\<\/script\>/g);

 

  // コメントを除去

  src = src.replace(/\<!--.*?--\>/gm, '');

  // 改行を除去

  src = src.replace(/(\r\n|\n|\r)/g, '');

  // Scriptを戻す

  if(pr !== null){

    for (let value of pr) { 

      src = src.replace(/\<pre\>.*?\<\/pre\>/, value);

    }

  }

  if(sty !== null){

    for (let value of sty) { 

      src = src.replace(/\<style\>.*?\<\/style\>/, value);

    }

  }

  if(scrip !== null){

    for (let value of scrip) { 

      value = scriptCnv(value);

      src = src.replace(/\<script\>.*?\<\/script\>/, value);

    }

  }

  return src;

}

function scriptCnv(scriptStr) {

  // コメントを除去

  scriptStr = scriptStr.replace(/\/\*[\s\S]*?\*\//gm, '');

  scriptStr = scriptStr.replace(/([\s]|{|}|\;)\/\/.*\n/g, '\n');

 

  // 改行を除去

  scriptStr = scriptStr.replace(/(\r\n|\n|\r)/g, ';');

  scriptStr = scriptStr.replace(/\;+/g, ';');

  scriptStr = scriptStr.replace(/\{\s*\;/g, '{');

  // 空白を削除

  scriptStr = scriptStr.replace(/\s*([\(\)\;\{\}\<\>\+\-\*\/\[\]\,])\s*/g, '$1');

  return scriptStr

}

function $(id) { return document.getElementById(id); }

</script>

</body>

</html> 

 

 pr = src.match(/\<pre\>[\s\S]*?\<\/pre\>/);

これで、preタグの内容を変数に保存しています。

  

src = src.replace(/\<pre\>.*?\<\/pre\>/, pr);

ここで、改行を削除したpreタグを変数の値に置き換えて元に戻しています。

正規化表現

scrip = src.match(/\<script\>[\s\S]*?\<\/script\>/g);

match ・・・マッチした文字列を変数に格納します。

\s ・・・空白文字（半角スペース、全角スペース、タブ、改行、改ページ）

\S ・・・空白文字以外の一文字

 

 

src = src.replace(/\<script\>.*?\<\/script\>/, value);

.（ピリオド） ・・・任意の１文字

*?（アスタリスク、クエスチョン） ・・・直前の文字が0文字以上続くもので、当てはまる中で最短のもの（最短一致）