codeタグ内でHTMLが実行されないように<>を文字参照に変換するJavascript

Sponsored Link



2014-06-29_135400

プログラムコードをブログなどのWebページに掲載する場合に必要な処理や見た目を整えてくれる便利なライブラリ


See the Pen Amazing code by nodelay (@nodelay) on CodePen.

HTMLで自作のコードを公開する場合、PREタグやCODEタグを使います。

<pre>
<code><span class="bu lightred pie">詳細&コードを見る</span></code>
</pre>

上記はHTMLコードを書いた例ですが、その場合は「<>」と「&」を文字参照コードに変換して記述するとよくネットでは解説されいます。そうしないとHTMLがレンダリングされてコードではない表示になってしまうからです。(ブラウザがHTMLとして認識します)

変換しない場合は以下のようにCSSが適用された表示がされます。(CSSは省略します)

2014-07-14_043524

レンダリングされた状態です。

このような表示にしないために、HTML上では「<>」と「&」を文字参照に変換して記述する必要があると巷では言われています。

2014-07-14_043155

補足:上の図は頭のcodeタグと掲載ソースの間に改行がありますが、通常は入れません。(見やすいように入れてあります)
同様に、最後の閉じcodeタグと掲載ソースの間も改行は入れないでください。

文字参照は全角になっていますが実際には半角で記述します。
「<」→「&lt;」 「>」→「&gt;」
「&」→「&amp;」

こういったツールはすで存在しており「Syntax Highlighter」やWordpress用などでは「crayon」というプラグインが存在しています。

しかし、Web開発をしているとどちらのツールも使えない場合があります。

かといって、いちいちHTMLのCODEタグ内だけ「<>」や「&」を文字参照コードに変換して記述するのも、面倒といえば面倒です。

HTMLコードの「<>」や「&」を自分で文字参照コードに変換する方法


HTMLには「<>」や「&」を文字参照コードに変換しないで「CODEタグ」で記述すると、先ほどのようにWebレンダリングされてしまいます。

2014-07-14_043524

そこで、思いつくのが「Javascript」(今回はjQueryも使います)で、書き換えてしまう方法です。

たとえば、以下のようなスクリプトになります(要jQuery)

$('code').each(function(){
    var text=$(this).html().replace(/</g,'&lt;'); /*このままだと文字参照コードで表示されてしまう*/
    var text=text.replace(/>/g,'&gt;'); /*このままだと文字参照コードで表示されてしまう*/
    var text=text.replace(/&/g,'&amp;'); /*このままだと文字参照コードで表示されてしまう*/
    $(this).html(text);
});

しかし、これは失敗します。

なぜなら、ブラウザ上では以下のように表示されてしまうからです。

2014-07-14_044413

確かに変換できているのですが、表示が「文字参照コード」で表示されています。これは意図したものとは違います。表示上は普通にコードで表示してもらいたいのです。

この状態でブラウザでソースコードを見ると以下のようになっています。

2014-07-14_044736

ソースコード上は記述したとおりの内容です。

なぜ、こうなるかというと、「<>」だけの変換なら問題ないのですが、「&」の変換を行うと、すでに変換済の「<>」にまで影響を与えてしまうからです。

なお、先ほどのJavascriptコードでは「DOMを書き換えているだけ」なので、ソースコードが変わらないのは当たり前です。

Javascriptにおける「DOM」を書き換えるという動作は、ソースコードそのものは書き換えません。ブラウザに読み込まれた内容だけを書き換えているので、表示上は変わるけど、ソースコード自体は変わらないのです。

これを回避するワザ


さて、これを回避するにはどうすればよいのでしょうか?

「&」の変換は行わない

です。なぜなら、別にこの変換は不要だからです。

//codeタグ内でHTMLが実行されないようにする
//==================================================
$('code').each(function(){
    var text=$(this).html().replace(/</g,'&lt;');
    var text=text.replace(/>/g,'&gt;');
    $(this).html(text);
});

ChromeとIE9以上で動作確認済です。(IE8は不可)

2014-07-14_045832

↑ このように表示されます。

これで意図した表示にすることができます。

IE8では動作しないのでご注意ください。

なお、実際にはHTMLの読み込みが終わってから動作させたいので、jQuery的には以下のように書いてください。

// ページ読み込みが終わった時に処理を実行する
//==================================================
jQuery(window).load(function(){
//処理を以下に記述

//codeタグ内でHTMLが実行されないようにする
//==================================================
jQuery('code').each(function(){
    var text=jQuery(this).html().replace(/</g,'&lt;');
    var text=text.replace(/>/g,'&gt;');
    jQuery(this).html(text);
});

//ここまで
});

WordPressでも動作するように「$」は「jQuery」に置き換えてあります。


2014-06-29_135400

プログラムコードをブログなどのWebページに掲載する場合に必要な処理や見た目を整えてくれる便利なライブラリ


Sponsored Link

最新記事はトップページで!

京都発・地方が盛り上がるグルメや観光に撮影ロケ地の話題を提供!


購読するならRSSをご利用ください!

RSSはこちらをご利用ください。


マスコミ各社様の記事使用規約についてはこちらをご覧ください。

当ブログでは掲示板やSNSなど他メディアでURLや記事を紹介することはございませんので、掲示板などで記事を紹介されていても一切無関係です。誤解なきようお願いいたします。
当ブログで転載しているTweetはTwitter社の規約(2013/10)に準じた形式(API利用)によって許可された範囲で行われています。また、Tweet内容の所有権はTwitter社の規約によりTweet元のアカウント所有者にあります。そのため、当ブログでその所有権を主張するものではありません。Tweet内容については責任は負いませんので予めご了承ください。