1

不幸的是，在我的项目中，我们在 JavaScript 中生成了大量的 HTML 代码，如下所示：

var html = new StringBuffer();
html.append("<td class=\"gr-my-deals\"><a href=\"").append(deal.url).append("\" target=\"_blank\">").append(deal.description).append("</a></td>");

我对此有两个具体的抱怨：

  1. 在 HTML 字符串中使用转义双引号 (\")。这些应替换为单引号 (') 以提高可读性。
  2. 使用 .append() 代替 JavaScript 字符串连接运算符“+”</li>

应用这两个建议，生成以下等效的代码行，我认为它更具可读性：

var html = "<td class=’gr-my-deals’&gt;<a href=’" + deal.url + "’ target=’_blank’&gt;" + deal.description + "</a></td>";

我现在正在寻找一种将第一行代码自动转换为第二行的方法。到目前为止，我想出的只是对我们所有的 Javascript 代码运行以下查找和替换：

Find:    ).append(  
Replace: +

这会将上面显示的代码行转换为：

html.append("<td class=\"gr-my-deals\"><a href=\"" + deal.url + "\" target=\"_blank\">" + deal.description + "</a></td>)";

这应该安全地删除除第一个“append()”语句之外的所有语句。不幸的是，我想不出任何安全的方法来自动将转义的双引号转换为单引号。请记住，我不能简单地进行查找/替换，因为在某些情况下您确实需要使用转义的双引号。通常，这是在您生成包含嵌套 JS 的 HTML 并且 JS 包含字符串参数时，例如

function makeLink(stringParam) {

  var sb = new StringBuffer();
  sb.append("<a href=\"JavaScript:myFunc('" + stringParam + "');\">");
}

我的问题（最后）是：

  • 有没有更好的方法来安全地用 '+' 替换对 'append()' 的调用
  • 有没有办法用单引号，正则表达式安全地替换转义的双引号？

干杯，唐

4

5 回答 5

4

考虑切换到JavaScript 模板处理器。它们通常相当轻巧，并且可以显着提高代码的清晰度......以及性能，如果您有很多重用并选择一个预编译模板的话。

于 2008-10-29T16:05:00.627 回答
2

这是一个 stringFormat 函数，有助于消除连接和丑陋的替换值。

function stringFormat( str ) {

    for( i = 0; i < arguments.length; i++ ) {
        var r = new RegExp( '\\{' + ( i ) + '\\}','gm' );

        str = str.replace( r, arguments[ i + 1 ] );    
    }
    return str;
}

像这样使用它：

var htmlMask = "<td class=’gr-my-deals’&gt;<a href=’{0}’ target=’_blank’&gt;{1}</a></td>";

var x = stringFormat( htmlMask, deal.Url, deal.description );
于 2008-10-29T16:00:46.827 回答
1

正如 Shog9 所暗示的，有几个很好的 JavaScript 模板引擎。这是一个如何使用我的jQuery Simple Templates的示例：

var tmpl, vals, html;

tmpl  = '<td class="gr-my-deals">';
tmpl += '<a href="#{href}">#{text}</a>';
tmpl += '</td>';

vals  = {
    href : 'http://example.com/example',
    text : 'Click me!'
};

html  = $.tmpl(tmpl, vals);
于 2008-10-29T19:39:37.667 回答
0

在 JavaScript 中应该使用 StringBuffer() 而不是字符串连接是有充分理由的。StringBuffer() 及其 append() 方法使用 Array 和 Array 的 join() 将字符串组合在一起。如果您有大量要连接的部分字符串，则已知这是一种更快的方法。

于 2008-10-30T00:55:29.977 回答
0

模板？模板很烂！这是我编写代码的方式：

TD({ "class" : "gr-my-deals" },
   A({ href : deal.url,
       target : "_blank"},
     deal.description ))

我使用一个名为 DOMination 的 20 行库，我会将它发送给任何需要的人，以支持此类代码。

优点是多方面的，但其中一些最明显的是：

  • 清晰、直观的代码
  • 易学易写
  • 紧凑的代码（没有关闭标签，只有右括号）
  • 被支持 JavaScript 的编辑器、压缩器等很好理解
  • 解决了一些特定于浏览器的问题（例如 IE 上的 rowSpan 和 rowspan 之间的区别）
  • 与 CSS 很好地集成

（顺便说一句，您的示例突出了 DOMination 的唯一缺点：class在这种情况下，任何同时也是 JavaScript 保留字的 HTML 属性都必须被引用，以免发生坏事。）

于 2010-12-30T00:40:40.063 回答