67
63

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2014-02-18

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は無視でよさげ!

67
63
7

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
67
63

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?