html でのテキスト結合について

長いhtml文を、引用符「”」とテキスト結合の「+」記号で表す方法がよくわかりません。

下記「//情報ウィンドウに表示するHTML文」において、引用符「”」で括り、
テキスト結合の「+」記号で連結する場合、どこからどこまでをまとめるかの選択基準はあるものでしょうか。
また
下記「//情報ウィンドウに表示するHTML文」において別の括りでの結合の仕方はあるものでしょうか。


//情報ウィンドウに表示するHTML文

var html = "<table border=1 cellspacing=1 cellpadding=3
bordercolor=#b98bba style='font-size:15px;'" +" width=195px><tr><td
bordercolor=#f2eaf2 width=90px><img src='"+ imgurl +"' width='90'" +"
height='67' border='0'></td><td bordercolor=#f2eaf2><a href='"+ hpurl
+"' target=_blank>" +"<b>"+ name +"</b></a><br /><br /><a
href='javascript:zoomInOut(+3);'>" +"<img src='./zoom-plus-mini.png'
width='18' height='18' alt='plus' title='3倍zoom-in'" +" border='0'
align='top' /></a><a href='javascript:zoomInOut(-3);'>" +"<img>src='./zoom-minus-mini.png' width='18' height='18' alt='minus'
title='3倍zoom-out'" +" border='0' align='top' /></a></td></tr></table>";

No.2 ベストアンサー 回答者： Kaneyan-R 回答日時： 2014/06/01 19:19

連結の考え方ですが、「固定」なのか「変数」なのかです。

例えば

<table border="1">
<tr>
<td><img src="hogehoge" /></td>
<td><a href="fugafuga">URL</a></td>
</tr>
</table>

として、「hogehoge」や「fugafuga」部分が変わるとするなら、

html = '<table border="1"><tr><td><img src="' + hogehoge + '" /></td><td><a href="' + fugafuga + '">URL</a></td></tr></table>';

となります。
「<table」～「src="」までは固定ですから、そのままひとつで括り、変数部分の前後を連結します。
あとはそれの繰り返しです。

この回答へのお礼

Kaneyan-Rさん、ご回答ありがとうございます。
よく分かりました。
Kaneyan-Rさん達がいらっしゃることは、おっとりがたなで、見ず知らずのプログラムの大海に漕ぎ出て、遭難しかけている私にとり、灯台の明るい道しるべの光のように思えます。
こんごとも宜しくお願い致します。
（甘えてばかりでなく、私も、灯台の明るい道しるべの光になれるよう日々精進していく所存であります。）

お礼日時：2014/06/01 20:52

No.4 回答者： Kaneyan-R 回答日時： 2014/06/01 23:07

ずっと「HTML」と言われていますが、HTMLではなく「JavaScript」の話です。

＞ところで、「改行前に「\（エスケープ）」を置くのがポイント。これで改行を無視します。」とありますが、上記「var outhtml =」に続くhtmlの場合は、エディタ上、改行せず、長い一つの文とする決まりがあるのでしょうか。

HTMLだからではなく、一つのつながった「文字列」だからです。

a = "あいうえお";
a = 'あいうえお';

※↑どちらも同じ意味。

とすると、aの値は『「あいうえお」と言う文字列』になります。
ダブルクォートやシングルクォートで囲まれた部分が文字列となるので、改行（改行文字）が入ってしまうと、そこで「文字が切れている＝終端のクォートが無い」と言う事になり、エラーになったり、意図しない結果になります。


また、

a = "あい" + "うえお";

とすると、aの値は「あいうえお」

b = "あい";
a = b + "うえお";

としても、aの値は「あいうえお」
になります。


もし、「改行を含んだ文字列」を変数として定義するのなら、改行を表す特殊文字「\n」を入れます。

a = "あい\nうえお";

とすると、変数aの値は
=================

あい
うえお

================

となります。



・「bordercolor="#b98bba"」と「style="font-size:15px\」間のように、エディタ上で改行しても問題は無いのでしょうか。エディタ上で改行すると問題が生じる場合はどういうときでしょうか。

これも前述の理由からエラーになります。
もし改行を入れるなら、

【改行エスケープ】
=============================
var html = '<table border="1" cellspacing="1" cellpadding="3" bordercolor="#b98bba" \
style="font-size:15px\;" width="195px">\
・
・
・
=============================

とするか、

【文字列連結】
=============================
var html = '<table border="1" cellspacing="1" cellpadding="3" bordercolor="#b98bba" ' +
'style="font-size:15px\;" width="195px">' +
・
・
・
=============================

としたり、

【変数内文字列追記】
=============================
var html = '';

html += '<table border="1" cellspacing="1" cellpadding="3" bordercolor="#b98bba" ';
html += 'style="font-size:15px\;" width="195px">';
html +=
・
・
・
=============================

としたりも出来ますが、途中で切れている事になるので、どんな内容かが非常に分かりにくくなります。

No.3 回答者： tkf- 回答日時： 2014/06/01 19:27

HTMLというよりJavaScriptの話ですね。

元ソース書いた人の何らかのポリシーによるものと思われます。
変数のために利用している + 以外の部分で改行してみると何となく分かるような。

No.1 回答者： Kaneyan-R 回答日時： 2014/06/01 18:54

ごちゃごちゃして可読性が悪いので、「連結」するのではなく「置換」すると見やすいです。

==================================================

var outhtml = '<table border="1" cellspacing="1" cellpadding="3" bordercolor="#b98bba" style="font-size:15px\;" width="195px">\
<tr>\
<td bordercolor="#f2eaf2" width="90px"><img src=".IMGURL" width="90" height="67" border="0"></td>\
<td bordercolor="#f2eaf2">\
<a href=".HPURL" target="_blank"><b>.NAME </b></a><br /><br />\
<a href="javascript:zoomInOut(+3)\;"><img src="./zoom-plus-mini.png" width="18" height="18" alt="plus" title="3倍zoom-in" border="0" align="top" /></a>\
<a href="javascript:zoomInOut(-3)\;"><img src="./zoom-minus-mini.png" width="18" height="18" alt="minus" title="3倍zoom-out" border="0" align="top"/></a>\
</td>\
</tr></table>';

var tmp = outhtml;
tmp = tmp.replace('.IMGURL',imgurl);
tmp = tmp.replace('.HPURL',hpurl);
tmp = tmp.replace('.NAME',name);

==================================================

置き換える変数部分を特定の形式（↑の場合は「.」+「大文字」）にしておいて、HTMLの表記通りに書きます。
そして、改行前に「\（エスケープ）」を置くのがポイント。これで改行を無視します。
あと、スタイル指定やスクリプトの「;」も一応エスケープしておいた方が良いですね。

最後にreplace使って、指定の文字を変数に置き換えれば終わり。
上の例だと、置き換えるのが全部別の変数だったのでそのまま指定しましたが、同じ変数が何箇所も出てくるなら、正規表現使って対象を「全置換」したほうが良いですね。
※直接指定だと、最初に出てきた対象しか置換しないので。

あと、border等のサイズ指定は、全部CSSに持っていった方が良いですよ。

この回答への補足

Kaneyan-Rさん、ありがとうございます。
よく理解できました。

・ところで、「改行前に「\（エスケープ）」を置くのがポイント。これで改行を無視します。」とありますが、上記「var outhtml =」に続くhtmlの場合は、エディタ上、改行せず、長い一つの文とする決まりがあるのでしょうか。

・また、
「'<table border="1" cellspacing="1" cellpadding="3" bordercolor="#b98bba" style="font-size:15px\;" width="195px">\」
において、「bordercolor="#b98bba"」と「style="font-size:15px\」間のように、エディタ上で改行しても問題は無いのでしょうか。エディタ上で改行すると問題が生じる場合はどういうときでしょうか。

補足日時：2014/06/01 21:23