[英]output template string in a new line
当我尝试在模板string
附加\\n
,它不会创建新行。 我不确定code
在哪里表现不正确。
以下是我的template String
:
var template =
'My skills: \n' +
'<%if(this.showSkills) {%>' +
'<%for(var index in this.skills) {%>' +
'<a href="#"><%this.skills[index]%></a> \n' +
'<%}%>' +
'<%} else {%>' +
'<p>none</p> \n' +
'<%}%> \n';
console.log(TemplateEngine(template, {
skills: ["js", "html", "css"],
showSkills: true
}));
Template
引擎功能
var TemplateEngine = function(html, options) {
var re = /<%([^%>]+)?%>/g, reExp = /(^( )?(if|for|else|switch|case|break|{|}))(.*)?/g, code = 'var r=[];\n', cursor = 0, match;
var add = function(line, js) {
js? (code += line.match(reExp) ? line + '\n' : 'r.push(' + line + ');\n') :
(code += line != '' ? 'r.push("' + line.replace(/"/g, '\\"') + '");\n' : '');
return add;
}
while(match = re.exec(html)) {
add(html.slice(cursor, match.index))(match[1], true);
cursor = match.index + match[0].length;
}
add(html.substr(cursor, html.length - cursor));
code += 'return r.join("");';
return new Function(code.replace(/[\r\t\n]/g, '')).apply(options);
}
以下是输出:
My skills: <a href="#">js</a> <a href="#">html</a> <a href="#">css</a>
这是一个工作的fiddle
:
我希望每个output
字符串都在新行中如下所示:
My skills:
<a href="#">js</a>
<a href="#">html</a>
<a href="#">css</a>
这是因为您只需在输入文本周围添加引号,然后转义内部引号即可:
'r.push("' + line.replace(/"/g, '\\"') + '")'
但是,如果line
包含行终止符 ,它将生成无效的JS,当您评估它时将抛出该JS。
有效地,删除代码中的所有换行符可以解决该问题:
code.replace(/[\r\t\n]/g, '')
但是,它消除了输入文本中的换行符。
相反,您应该处理行终止符。 就像是
'r.push("' + line
.replace(/\\/g, '\\\\') // Escape the escaping character
.replace(/"/g, '\\"') // Escape double quotes
.replace(/\n/g, '\\n') // Escape <LF>
.replace(/\r/g, '\\r') // Escape <CR>
.replace(/\u2028/g, '\\u2028') // Escape <LS>
.replace(/\u2029/g, '\\u2029') // Escape <PS>
+ '");'
var TemplateEngine = function(html, options) { var re = /<%([^%>]+)?%>/g, reExp = /(^( )?(if|for|else|switch|case|break|{|}))(.*)?/g, code = 'var r=[];\\n', cursor = 0, match; function escapeText(s) { return '"' + s .replace(/\\\\/g, '\\\\\\\\') .replace(/"/g, '\\\\"') .replace(/\\n/g, '\\\\n') .replace(/\\r/g, '\\\\r') .replace(/\
/g, '\\\
') .replace(/\
/g, '\\\
') + '"'; } var add = function(line, js) { js? (code += line.match(reExp) ? line + '\\n' : 'r.push(' + line + ');\\n') : (code += line != '' ? 'r.push(' + escapeText(line) + ');\\n' : ''); return add; } while(match = re.exec(html)) { add(html.slice(cursor, match.index))(match[1], true); cursor = match.index + match[0].length; } add(html.substr(cursor, html.length - cursor)); code += 'return r.join("");'; return new Function(code).apply(options); } var template = 'My skills: \\n' + '<%if(this.showSkills) {%> \\n' + '<%for(var index in this.skills) {%> \\n' + '<a href="#"><%this.skills[index]%></a> \\n' + '<%}%> \\n' + '<%} else {%> \\n' + '<p>none</p> \\n' + '<%}%> \\n'; console.log(TemplateEngine(template, { skills: ["js", "html", "css"], showSkills: true }));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.