2

我目前有一堆看起来像这样的行：

txt = "Can't print the value for <span class='keyword'>"+arguments[1]+"</span> before it's set";

然后我在做

$('#mydiv').append($('<div/>').html(txt));

这看起来很糟糕，我需要转义参数中的任何 html[1]

我能想到的唯一选择是确保所有文本都在它自己的元素内：

var spans = [];
spans[0] = $('<span/>').text("Can't print the value for ");
spans[1] = $('<span/>').text(arguments[1]).className('keyword');
spans[2] = $('<span/>').text(" before it's set");
$('#mydiv').append($('<div/>').append(spans[0],spans[1],spans[2]));

对于一个简单的文本行来说，这是相当多的。还有什么我可以做的吗？

编辑：这不是模板引擎应该处理的事情。它是由 javascript 日志记录功能生成的 html。

4

2 回答 2

1

如果格式一致，我会将其添加为普通字符串，然后搜索关键字部分。

$('<div/>')
  .appendTo('#mydiv')
  .html("Can't print the value for <span class='keyword'></span> before it's set")
  .find('.keyword').text(arguments[1]);
于 2012-05-05T03:50:24.433 回答
0

如果您将继续使用 JS 创建大量 HTML，我建议您使用模板库。我是最近的皈依者，我花了很长时间才明白这一点。但是看到许多成功的网站（twitter、github 等）和伟大的 John Resig推广和/或大量使用模板，我很高兴我坚持试图理解。现在我懂了。这是为了分离关注点，将逻辑排除在视图之外。

我正在使用这个非常简单的模板库：http ://blueimp.github.com/JavaScript-Templates/虽然underscore.js和mustache.js提供的模板更受欢迎。

我使用的库的优点是它非常小，<1kb，如果你熟悉这些，基本上就像编写 php/asp 代码一样。

您可以在标签内编写 HTML<script>而无需转义：

使用您的变量，txt语法如下所示：

<script>
  var data={txt : "Can't print the value for <span class='keyword'>"+arguments[1]+"</span> before it's set"};

  <div>{%=o.txt%}</div>
</script>
于 2012-05-05T03:50:52.823 回答