Question

嘿，有SO的天才！

这是一个自动完成插件，需要接受数据作为数组数组并使用格式字符串（或正则表达式）进行转换。格式字符串可以是任何格式。

var dataArray = [ ["data1-1", "data1-2", "data1-3"], ["data2-1", "data2-2", "data2-3"],... ];
var format = "<li>{0} <br /> -- <small> {1}, {2}</small></li>";
// alternate formats could be: 
//  "<li>{0}</li>"
//  "<a href="{0}" title="{2}">{1} ({2})</a>"
// etc...

function fillAutocomplete(datum,format){
    // do some magic here...
    // return "<li>data1-1 <br /> -- <small> data1-2, data1-3</small></li>";
}

以下想法有效..但我想看看有什么事情会更快......

var datum = data[0],
    html="<li>\{0\} <br /> -- <small> \{1\}, \{2\}</small></li>";
for(var i=0,l=datum.length;i<l;++i){
    var reg = new RegExp("\\{"+i+"\\}");
    html=html.replace(reg,datum[i]);
}

我对如何解决这个问题有了新的想法。

Answer 1

查看John Resig的"Search and Don't Replace"，看看您是否可以将回调函数传递给myString.replace(..)。

var datum = data[0];
var html="<li>{0}<br /> -- <small>{1}, {2}</small></li>";
var pattern = /\{(\d+)\}/g;

html = html.replace(pattern,function(match, key, value){
    return datum[key];
});

Answer 2

虽然不那么优雅，但速度要快得多：

html = "<li>" + datum[0] 
        + " <br /> -- <small> " 
        + datum[1] + ", " + datum[2] 
        + "</small></li>";

您的原始方法为for循环的每次迭代创建一个新的正则表达式，这可能很昂贵。您可以考虑创建这些表达式并将其缓存，但即使这样，执行正则表达式和替换格式字符串的开销仍然大于简单的字符串连接。

不幸的是，优雅通常是优化的第一个受害者。

Answer 3

您可以将要替换的函数作为第二个参数传递。试试这个：

function fillAutocomplete(datum,format){
  return format.replace(/{([0-9]+)}/g, function(match) {
    return datum[match[1]];
  });
}

Answer 4

根据您需要更换的次数，这可能会更快

var datum = data[0],
    html="<li>{0} <br /> -- <small> {1}, {2}</small></li>";
for(var i=0,l=datum.length;i<l;++i){
    html=html.split("{" + i + "}").join(datum[i]);
}

当{n}作为字符串的第一部分或最后部分出现时，存在一些极端情况。

Answer 5

如果您仍想使用HTML字符串，这应该是最快的：

html = [
  "<li>", datum[0],
  "<br /> -- <small>",
  datum[1], ", ", datum[2],
  "</small></li>"
].join("");

当然，最好是实际使用DOM。

html = document.createElement("li");
html.appendChild(document.createTextNode(datum[0]));
html.appendChild(document.createElement("br"));
html.appendChild(document.createTextNode(" -- "));
html.appendChild(document.createElement("small"))
  .appendChild(document.createTextNode(datum[1] + ", " + datum[2]));

快速Javascript字符串替换

5 个答案: