Bloggerに書いたJavascriptが文字化けする

公開日:2020-09-007

Google Bloggerの投稿やページの本文にはJavascriptを直接書くことができます。だいたいのコードは、そのまま動くのですがたまに意図しない動きになるときがあります。


この時、問題のJavascriptのコードをブラウザのデベロッパーツールのコンソールなどで実行すると正しく動くのに、Bloggerの本文に書くと動きません。

これは、Bloggerが一部の漢字をコード化(&#xxx;)するために発生します。

例えば、下にようにBloggerに書きます。

<script type="text/javascript">
var e = document.getElementById("id1");
e.innerText = "【<A B> Blur&Yellow <C D>】";
</script>
view raw script1.js hosted with ❤ by GitHub

この時に、実際に生成されるHTMLコードは以下のように文字列中の文字の一部が&#xxx;の形になってしまいます。

<script type="text/javascript">
var e = document.getElementById("id1");
e.innerText = "&#12304;<A B> Blur&Yellow <C D>&#12305;";
</script>
view raw script1-result.js hosted with ❤ by GitHub

これを防ぐ方法はないようですが、すべての漢字がこうなるわけではありません。試した限りでは主に記号がこうなるようです。

１２３４５６７８９０１２３４５６７８９０
ＡＢＣＤＥＦＧＨＩＪ ＡＢＣＤＥＦＧＨＩＪ
｛＠［＋＊｝；：］？&#65371;&#65312;&#65339;&#65291;&#65290;&#65373;&#65307;&#65306;&#65341;&#65311;
あいうおか漢字表示あいうおか漢字表示


解決方法１ あらかじめエンコードしておく

問題の文字列の場所がわかっていて数が少ない場合は、事前にencodeURIでエンコードした文字列をソースコードに書いて、decodeURIでデコードして使う方法があります。


解決方法２ INPUTのVALUEに書いておく

<INPUT TYPE="hidden">の値として書いて置いて、Javascriptでそれを取り出して使う方法があります。

下の例では、<input ... value="【MY TEXT】">の"【MY TEXT】"が、Javascriptの中で使いたい文字列です。この部分は、実際のBloggerが変換したHTMLでは、<input ... value="&#12304;MY TEXT&#12305;">となっていますが、もちろん表示はただしく、【MY TEXT】javascriptとなります。

<!-- この、id="place"のテキストを Javascript で動的に書き換えます-->
<div id="place">ここにJavascriptで動的に設定</div>
<!-- この、id="mytext"の value が、上の id="place" のテキストと設定されます-->
<input id="mytext" type="hidden" value="【MY TEXT】">
<script type="text/javascript">
<!-- input の value に設定している文字列を取り出す-->
var htmltext = document.getElementById("mytext").value;
<!-- 取り出した文字列に" (javascript)"という文字列を加えて id="place" に設定 -->
document.getElementById("place").innerText = htmltext + " (javascript)";
</script>
view raw inputValue.html hosted with ❤ by GitHub