SafariでもエラーにならないJavascriptのヒアドキュメントの書き方

  • 62
    いいね
  • 7
    コメント
この記事は最終更新日から1年以上が経過しています。

Safariの荒ぶり

こちら( http://qiita.com/_shimizu/items/837b529de9f3302e315c )で見かけたヒアドキュメントの記述トリック、この方法だとSafariで期待した結果が得られずエラーになってしまう。
なお、元ネタについてはこちら( http://tomasz.janczuk.org/2013/05/multi-line-strings-in-javascript-and.html )

var html = (function () {/*
  <!DOCTYPE html>
  <html>
    <body>
      <h1>Hello, world!</h1>
    </body>
  </html>        
*/}).toString().match(/[^]*\/\*([^]*)\*\/\}$/)[1];

(この部分は修正の追記により削除しました。)

修正 Safariでエラーになる原因

@uasiさんにコメントをいただいて判明しました。
SafariでtoString()すると、勝手にセミコロンが入ってきてしまうという挙動が・・・!

"function () {/*
  <!DOCTYPE html>
  <html>
    <body>
      <h1>Hello, world!</h1>
    </body>
  </html>        
*/;}" // ←うわああああ勝手にセミコロンはいってるううう

こいつが勝手に差し込まれるせいで、正規表現に引っかからなかったということだったようです。

なお、元の方法の形で実現する方法についても@uasiさんがコメントに記載してくださっています。
本当に有難うございます!!!(´;ω;`)

Safariでエラーの出ないヒアドキュメントの書き方

@uasiさんがコメントしてくれた内容で実現可能なので、以下の投稿内容については元投稿を残してある蛇足的なもんだと思ってください。

ヒアドキュメント使いたかったので、以下の様な方法で書いてみた。
Windows環境で、IEエミュレータとChrome、FF、Safariのそれぞれ最新ブラウザでテストしてみた結果、どれも問題なく動いた。

<!DOCTYPE html>
<html>
<head>
    <title>ヒアドキュメントのテスト</title>
</head>
<body id="body">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
    <script type="text/javascript">
        var _html = (function () {/*
            <h1>Hello, world!</h1>
            <span>テスト</span>
            <img src="https://www.google.co.jp/images/srpr/logo11w.png">
        */}).toString().replace(/(\n)/g, '').split('*')[1];
        $('#body').append(_html);
    </script>
</body>
</html>

Safariではエラーでなくなったけども、ほかのブラウザではわからないので、利用するときは必ずテスト出来る環境がある範囲を対象にすべきだと思う。

追記

@nakajmgさんにWinのSafari5はもうサポートされていないと教えていただきました。
ヤバメな脆弱性を放置してるらしい。ひぃ!\(^o^)/ WinのSafariは無視でよさげ!