Question

当我尝试将\n附加到我的模板string时，它不会创建新行。我不确定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包含line terminators，它将产生无效的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(/\u2028/g, '\\u2028')
    .replace(/\u2029/g, '\\u2029')
    + '"';
  }
  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
}));

输出新行中的模板字符串

1 个答案: