在新行中輸出模板字符串

Question

當我嘗試在模板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 ：

http://jsfiddle.net/nrd2ktxn/

我希望每個output字符串都在新行中如下所示：

My skills:   
<a href="#">js</a>  
<a href="#">html</a>  
<a href="#">css</a>   

Answer 1

這是因為您只需在輸入文本周圍添加引號，然后轉義內部引號即可：

'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 }));