正規表現によるＨＴＭＬ内部のコピー＜正規表現＜Javascript＜木暮仁

正規表現によるＨＴＭＬ内部のコピー

ＨＴＭＬの内部にある選択個所の内容を同じＨＴＭＬ内部の表示場所にコピー表示することを対象にします。
正確にコピーするには、正規表現による加工が必要になります。それを順を追って説明します。
しかし、文章そのものではなく機能をコピーする場合には、その加工が機能を失うので注意が必要です。

・選択個所にタグが含まれないとき　　　　　　　　　　　　→　例３
・タグが含まれ、機能ではなく記述内容を表示したいとき　　→　例５
・タグが含まれ、記述内容ではなく機能をコピーしたいとき　→　例１

選択個所Ａ：タグ（"<"や">"）がない場合

このＨＴＭＬ内に次の記述があります。<div id="選択個所Ａ">:～</div>の範囲がコピーされる元の個所です。

□は全角のスペース、_は半角のスペースです。

<div id="選択個所Ａ">:
１行目です。
□□２行目です。
________３_____行_____目です。

５行目です（上の４行目は空行）。
</div>

１行目です。
　　２行目です。
        ３     行     目です。

５行目です（上の４行目は空行）。

例１Ａ：基本機能

アは、選択個所をスクリプトに読み込む機能です。イは、スクリプトで作成した内容を表示場所に書き出す機能です。
赤枠の場所に、<div id="表示場所１Ａ"></div> が記述されています。
［実行］により、例１('選択個所Ａ', '表示場所１Ａ'): が実行されます。

すなわち、次のスクリプトは、「選択個所Ａ」を入力文に読み込み、「加工せずにそのまま」出力文として「表示場所１」に書き出す機能です。例１では正規表現は用いていません。

function 例１(選択個所, 表示場所) {
    var 入力文 = document.getElementById(選択個所).innerHTML;  // ア
    var 出力文 = 入力文;
    document.getElementById(表示場所).innerHTML = 出力文;      // イ
}

例１('選択個所Ａ', '表示場所１Ａ');

「加工せずにそのまま」のはずだったのに、複数行が改行せずに１行で出力されてしまいました。

例２Ａ：改行

例１Ａで１行になってしまったのは、WindowsとＨＴＭＬで改行の仕組みが異なるからです。
Windowsでは、改行が見えないコード（\n）になっていますが、ＨＴＭＬでは、それが無視され、<br>タグで指定することになっているからです。

赤のように、\nを<br>に変換しました。

function 例２(選択個所, 表示場所) {
    var 入力文 = document.getElementById(選択個所).innerHTML;
    var 出力文 = 入力文;
    出力文 = 出力文.replace(/\n/g, "<br>");
    document.getElementById(表示場所).innerHTML = 出力文;
}

例２('選択個所Ａ', '表示場所２Ａ');

改行は解決しましたが、「３行目」の半角スペースが崩れています。

例３Ａ：半角スペース

例２Ａで、半角スペースが崩れたのはＨＴＭＬの仕様です。ＨＴＭＬでは、「連続した半角スペースは一つの半角スペースとみなす。行頭など特定の個所での半角スペースは無視する」ことになっています。それを回避するには、半角スペースをその代替文字である "&nbsp" に変更する必要があります。

function 例３(選択個所, 表示場所) {
    var 入力文 = document.getElementById(選択個所).innerHTML;
    var 出力文 = 入力文;
    出力文 = 出力文.replace(/\n/g, "<br>");
    出力文 = 出力文.replace(/ /g, "&nbsp;");
    document.getElementById(表示場所).innerHTML = 出力文;
}

例３('選択個所Ａ', '表示場所３Ａ');

これで選択個所と全く同じものが表示されました。

タグ（"<"や">"）がない場合は例３を用います。

選択個所Ｂ：ＨＴＭＬの通常（タグがある）の文の場合

次の文が「選択個所Ｂ」にあります。ＨＴＭＬではこのように多様なタグが含まれています。

<h4>タグを含む場合</h4>
<p>この次に半角スペースがあります。1___2___3___4___5<br>
地の色<span style="color:blue">ここは青色になる</span>地の色に戻る。<br>
リンク：<a href="#例１Ａ">例１Ａへ戻る</a></p>

例１Ｂ：機能のコピー

例１Ａで示した「例１」を用います。

function 例１(選択個所, 表示場所) {
    var 入力文 = document.getElementById(選択個所).innerHTML;  // ア
    var 出力文 = 入力文;
    document.getElementById(表示場所).innerHTML = 出力文;      // イ
}

例１('選択個所Ｂ', '表示場所１Ｂ'):

半角スペースが崩れていますが、選択個所Ｂもこれと同じに表示されているのですから、問題はありません。
「ここは青色になる」は正しく青色になっていますし、「例１Ａへ戻る」をクリックすれば正しくジャンプします。

例２や例３では、<br>タグが選択個所とスクリプトでダブってしまうので、各行間に空白行ができてしまうので不適切です。

タグ機能も含めたコピーでは例１を用います。

例４Ｂ：タグも含めたコピー（不適切）

選択個所Ｂに記述した通り、すなわち上の青枠で示した通りの内容を表示させたいことがあります。
そのため、"<"と">"を "<"と">" に置き換えてみました。

function 例４(選択個所, 表示場所) {
    var 入力文 = document.getElementById(選択個所).innerHTML;
    var 出力文 = 入力文;
    出力文 = 出力文.replace(/ /g, " ");
    出力文 = 出力文.replace(/</g, "&lt;");
    出力文 = 出力文.replace(/>/g, "&gt;");
    document.getElementById(表示場所).innerHTML = 出力文;
}

例４('選択個所Ｂ', '表示場所４Ｂ');

改行を除いてはうまくいっています。改行のために、出力文 = 出力文.replace(/\n/g, "<br>"): を加えてみても、上の表示に<br>が加わるだけで改行されません。

例５Ｂ：タグも含めたコピー

例４Ｂのジレンマは、入力文を各行に分解して、変換を行った後に、各行に<br>を加えて連結して出力文を組み立てることにより解決できます。

function 例５(選択個所, 表示場所) {
    var 入力文 = document.getElementById(選択個所).innerHTML;
    var 出力文 = "";
    var 行 = new Array();
    行 = 入力文.split("\n");
    for (var i=0; i<行.length; i++) {
        行[i] = 行[i].replace(/ /g, " ");
        行[i] = 行[i].replace(/</g, "&lt;"); 
        行[i] = 行[i].replace(/>/g, "&gt;");
        出力文 += 行[i] + "<br>";           // 改行の復活と連結
    }
    document.getElementById(表示場所).innerHTML = 出力文;
}

例５('選択個所Ｂ', '表示場所５Ｂ');

最終行に余計な<br>タグが含まれますが、本質的な欠点ではなので、このままにしておきます。

タグを単なる文字として解釈しているので、「ここは青色になる」や「例１Ａへ戻る」などの機能は失われます。
例５は、各行について個別の変換をするときに重要になる方法です。

選択個所をタグも含めて表示するには例５を用います。

選択個所Ｃ：スクリプトを含む場合

次のように選択個所にスクリプトが含まれています。

<script>
function fugou(x) {
    if (x > 0) alert("正数");
    else alert("負数");
}
</script>
<button onClick="fugou(10)">実行</button>

この場合は、「選択個所Ｂ：ＨＴＭＬの通常（タグがある）の文の場合」と同じになります。

例１Ｃ：機能のコピー

タグ機能も含めたコピーでは例１を用います。

function 例１(選択個所, 表示場所) {
    var 入力文 = document.getElementById(選択個所).innerHTML;
    var 出力文 = 入力文;
    document.getElementById(表示場所).innerHTML = 出力文;
}

例１('選択個所Ｃ', '表示場所１Ｃ'):

上の［実行］をクリックすると、fugou(x) が実行されてダイアログボックスに「正数」が表示されます。スクリプトの部分もコピーされていることがわかります。

例５Ｃ：タグも含めたコピー

選択個所の記述（上の青枠の内容）をそのまま表示します。例５を使います。
これは、プログラム解説のページ作成などに利用できましょう。

function 例５(選択個所, 表示場所) {
    var 入力文 = document.getElementById(選択個所).innerHTML;
    var 出力文 = "";
    var 行 = new Array();
    行 = 入力文.split("\n");
    for (var i=0; i<行.length; i++) {
        行[i] = 行[i].replace(/ /g, " ");
        行[i] = 行[i].replace(/</g, "&lt;"); 
        行[i] = 行[i].replace(/>/g, "&gt;");
        出力文 += 行[i] + "<br>";
    }
    document.getElementById(表示場所).innerHTML = 出力文;
}

例５('選択個所Ｃ', '表示場所５Ｃ');