js使用转义符技巧输出HTML

  有时候我们需要使用js输出html代码，会涉及一些标签、变量。
  对于很长的html代码，为了让js具有较好的可读性，需要在js里对html代码进行一定的拆分、拼接。

简单明了版

  通常我们这样做

var div = document.getElementById("divc");

var html = ""

html += ""

+ "<h1>"

+ "<a href="javascript:;" onclick="\"alert('javascript')\"">DHTML innerHTML propery.</a>"

+ "</h1>";

div.innerHTML = html;

  使用转义技巧这样做

var div = document.getElementById("divc");

var html = ""

html += '\

<h1>\

<a href="javascript:;" onclick="alert(\'javascript\')">DHTML innerHTML propery.</a>\

</h1>\

';

div.innerHTML = html;

  利用转义符去掉回车。
  注：引号嵌套时也是需要转义的。

补充：2016-12-28

其实，在w3c手册中也有所体现，请参阅“JavaScript 语句”中的“对代码行进行折行”。

对代码行进行折行
您可以在文本字符串中使用反斜杠对代码行进行换行。下面的例子会正确地显示：

document.write("Hello \
World!");
不过，您不能像这样折行：

document.write \
("Hello World!");

扩展阅读一-未结束的字符串常量和转义符用法

引：http://www.jquerycn.cn/a_11520

本文介绍了未结束的字符串常量的解决方法，以及转义字符的用法，有需要的朋友参考下。

 

本节内容：
未结束的字符串常量的解决办法

1，如果没有"" ，错误是未结束的字符串常量原来 ：
<input type="button" onclick=location.href="studentedit.asp?cid=<%=nCID%>&cname=<%=sCName%>" />
更改后：<input type="button" onclick="location.href='studentedit.asp?cid=<%=nCID%>&cname=<%=sCName%>'" />

2，js老是出错，明明ie7和Firefox中没有任何错误，在ie6就提示错误“未结束的字符串常量”，最后请教了Google，才知道是编码不统一的问题，可能是引用了与页面编码格式不同的js文件，或者是页面中包含了编码不同的代码，如汉字或者其它字符。

经过排查，发现是页面的编码不统一，将设置页面编码格式语句：
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
从body上面调放至js代码之前。

3，js技巧--转义字符"\"的妙用
// blueDestiny, never-online // blueDestiny [at] 126.com
通常，在动态给定一个container的innerHTML时，通常是样做的：

<div id="divc" />
<SCRIPT LANGUAGE="JavaScript">
var div = document.getElementByIdx("divc");
var html = ""
html += ""
+ "<h1>"
+ "<a href='javascript:;' onclick=\"alert('javascript')\">DHTML innerHTML propery.</a>"
+ "</h1>";
div.innerHTML = html;
</SCRIPT>

更简单的方法：

<SCRIPT LANGUAGE="JavaScript">
var html='\
<table width="100%" border="0" cellspacing="0" cellpadding="0">\
 <tr>\
  <td>&nbsp;</td>\
 </tr>\
 <tr>\
  <td>&nbsp;</td>\
 </tr>\
</table>\
';
alert(html);
</SCRIPT>

有几点注意，看下面的例子

<SCRIPT LANGUAGE="JavaScript">
//要用\'把单引号转义
var html='\
 <h1>\
 javascript技巧\
 </h1>\
 <a href="javascript:;" onclick="alert(\'javascript\')">javascript转义</a></font>\
 <br/>\
 power by \'blueDestiny, never-online\'\
';
alert(html);
</SCRIPT>

该转义的地方还是得用"\"
'-------------------------------------------------------
'   原理：
'-------------------------------------------------------
这个是我自己的个人观点，如果有不对的地方，请指出：
还是看个例子：

<SCRIPT LANGUAGE="JavaScript">
//s1和s2的字符a前都有一个空格
s1='\
 a';
s2=' a';
document.write("s1: " + s1.length + "\ns2: " + s2.length);
</SCRIPT>

输出结果：
s1: 2 s2: 2
也就是说转义符将回车转义掉了！也就是说
再看个例子：

<SCRIPT LANGUAGE="JavaScript">
//下面这个字符串是有空格的，也就是这样s1='\ 的。
s1='\
a';
document.write("s1: " + s1.length);
</SCRIPT>

输出错误，错误提示：未结束字符串常量。
也就是说是多加了一个空格的原因。那再这样试试

<SCRIPT LANGUAGE="JavaScript">
s1='\ \
a';
document.write("s1: " + s1.length);
</SCRIPT>

结果很明显了，在字符串中，"\"转义符可以将回车转义掉（也就是回车符不存在了），但是不能将制表符，以及空格字符转义（它们是存在的，上面的例子说明了这一点）。
最后，给大家一个小tips，还记得上面的这个代码吗？

<SCRIPT LANGUAGE="JavaScript">
//要用\'把单引号转义
var html='\
 <h1>\
 javascript技巧\
 </h1>\
 <a href="javascript:;" onclick="alert(\'javascript\')">javascript转义</a></font>\
 <br/>\
 power by \'blueDestiny, never-online\'\
';
alert(html);
</SCRIPT>

观察下弹出的模态框，看看字符串是怎么样的？应该就会明白了。

拓展阅读二-JavaScript:多行字符串

引：http://www.cnblogs.com/ziyunfei/archive/2012/10/04/2711551.html

原文:http://asenbozhilov.com/articles/multiline-strings.html

---

多行字符串的作用是用来提高源代码的可读性.尤其是当你处理预定义好的较长字符串时,把这种字符串分成多行书写更有助于提高代码的可读性和可维护性.在一些语言中,多行字符串还可以用来做代码注释.
大部分动态脚本语言都支持多行字符串,比如Python, Ruby, PHP. 但Javascript呢?

译者注:python中可以使用两种多行字符串的写法,一种是使用三引号,也是python中多行注释的方法,这种方法产生的多行字符串是真正的多行.也就是说,解释器会认为每行的结尾处的确有一个"\n":

>>>print("""我
你
他
""")
 
我
你
他

另一种写法是

>>>print("我\
你\
他\
")
 
我你他

这种写法也是下面要讲的JavaScript目前实现的写法,它产生的实际上只有一行字符串.但称它为多行指的是在源代码中这个字符串占用了多个物理行(对应的概念是逻辑行).

Ruby, PHP中是通过Here document实现多行字符串.

你在网上见过下面这种结论吗?

"Javascript不支持多行字符串."

"多行字符串不是合法的JavaScript语法."

"这种特性是没有被标准化的私有实现."

如果是的话,忘掉它们吧,这样的说法是不对的.Javascript其实支持多行字符串.

关于JavaScript最奇怪的一件事是,尽管这门语言有着非常好的规范文档ECMA-262.但却有很多关于该语言的误解.网上有太多描述不恰当的或者完全错误的文章.

当然,每个人都有权选择自己去读什么文章,有权选择是否相信文章中给出的结论.但当我在博客上,邮件列表上,twitter上,或者其他任何地方阅读关于JavaScript的东西时,我总是会动手进行测试,最主要的是我会打开ECMA-262,把文中给出的信息和文档做对比,看看是不是像他说的那样.也许你会问我:"那你为什么还要读别人的文章啊?".是啊,既然有了ECMA-262文档,我们为何还要去读别人写的文章呢?首先,规范文档是比较难阅读和难理解的.你必须很熟悉文档中提到的那些抽象的东西才能真正的弄懂它.而且你必须阅读完整的相关内容.如果你跳过一些单词或句子,你就可能理解错误.

写在博客中的文章可以看作是更高层次的文档.通常意味着作者是在读过文档之后,用更容易理解的话语和代码片段解释了文档中的内容.这样的文章才算是好文章.

多行字符串就是我上面所说的一个例子.它确实是正式规范(ECMA 265 5th edition)的一部分,ES5扩展了字符串字面量的语法.在(7.8.4 String Literals)中添加了DoubleStringCharacter和 SingleStringCharacter: LineContinuation.

LineContinuation 的语法是:

\ LineTerminatorSequence

LineTerminatorSequence 指的是下面这些字符中的一个:

换行符	<LF>
回车符	<CR>
行分割符	<LS>
段分隔符	<PS>

换句话说,你可以通过转义行终止符来实现多行字符串.你必须这么做,否则会得到一个语法错误.

var htmlStr = '\
    <div>\
        content\
    </div>\
';

当他,这种写法只支持ECMA-262-5的环境.(译者注:实际上,ES3的环境也全都支持)
但是需要注意的是,当输出字符串时,换行符是不会显示出来的.如果你需要真实的换行,必须在反斜杠前面加上一个\n.

如果你需要兼容旧的引擎环境,你应该使用多个字符串相连接的办法,或者把多个字符串分别放在一个数组的元素中,最后join它们

var htmlStr = '<div>' +
                'content' +
              '</div>';

 var htmlStr = [
      '<div>',
        'content',
      '</div>'
    ].join('');

JavaScript风格的多行字符串是有点小丑,而且很容易出错.不过有个好消息是,在未来版本的规范中,将会有一个 Template Strings: http://wiki.ecmascript.org/doku.php?id=harmony:quasis.
其中最大的不同是,LineTerminatorSequence可以直接出现在字符串字面量中而不需要使用反斜杠转义.

译者注:再介绍两种没有什么实际用途的实现多行字符串的写法.其实最好不要看.

1.利用E4X的写法

var string = (<xml><![CDATA[
我
你
他
]]></xml>).toString().trim();
 
console.log(string);
 
我
你
他

E4X只有Firefox支持,支持了很多年了,但其他浏览器一直不实现,所以也流行不起来,而且从Firefox17开始,E4X将会被默认禁用.

2,利用函数内部的多行注释

function hereDoc(f) {　
    return f.toString().replace(/^[^\/]+\/\*!?\s?/, '').replace(/\*\/[^\/]+$/, '');
}
var string = hereDoc(function () {/*
我
你
他
*/});
console.log(string)
 
我
你
他

Firefox去年的版本还不支持这种写法,原因是在调用函数的toString方法时,会把注释过滤掉.不过现在支持了.