高效的Javascript字符串替换

嘿那里,我有一块HTML,我将重复使用(在用户访问期间的不同时间,而不是一次).我认为实现这一目标的最佳方法是创建一个HTML div,隐藏它,并在需要时使用其innerHTML并对几个关键字执行replace().作为示例HTML块...

  
%TITLE%
  
Text text %KEYWORD% text
  
%CONTENT%
  

用动态数据替换这些关键字的最佳方法是...

template = document.getElementById('sample');
template = template.replace(/%TITLE%/, some_var_with_title);
template = template.replace(/%KEYWORD%/, some_var_with_keyword);
template = template.replace(/%CONTENT%/, some_var_with_content);
template = template.replace(/%ID%/, some_var_with_id);

感觉就像我选择了一种愚蠢的方式来做到这一点.有没有人对如何以任何方式更快,更智能或更好地做到这一点有任何建议？此代码将在用户访问期间经常执行,有时常常每3-4秒执行一次.

提前致谢.

1> some..：

---

看起来你想要使用模板.

//Updated 28 October 2011: Now allows 0, NaN, false, null and undefined in output. 
function template( templateid, data ){
    return document.getElementById( templateid ).innerHTML
      .replace(
        /%(\w*)%/g, // or /{(\w*)}/g for "{this} instead of %this%"
        function( m, key ){
          return data.hasOwnProperty( key ) ? data[ key ] : "";
        }
      );
}

代码说明:

期望templateid成为现有元素的id.

期望data成为数据的对象.

使用两个参数替换来进行替换:

第一个是正则搜索全部%keys%(或者{keys}如果您使用备用版本).键可以是AZ,az,0-9和下划线_的组合.

第二个是为每个匹配调用的匿名函数.

匿名函数在数据对象中搜索regexp找到的键.如果在数据中找到密钥,则返回密钥的值,该值将替换最终输出中的密钥.如果未找到密钥,则返回空字符串.

模板示例:

  
%test%
  
%word%

通话示例:

document.getElementById("my").innerHTML=template("mytemplate",{test:"MYTEST",word:"MYWORD"});

---

除了!它无法插入数字零!替换函数应该真正检查值为null/undefined,而不是真值.

---

这应该是公认的答案.*耸耸肩*

2> Kristof Neir..：

---

您可以调整此代码以执行您想要的操作:

var user = {
    "firstName": "John",
    "login": "john_doe",
    "password": "test",
};

var textbody = ""
+"Hey {firstName},\n"
+"\n"
+"You recently requested your password.\n"
+"login: {login}\n"
+"password: {password}\n"
+"\n"
+"If you did not request your password, please disregard this message.\n"
+"";

textbody = textbody.replace(/{[^{}]+}/g, function(key){
    return user[key.replace(/[{}]+/g, "")] || "";
});

您可能还想查看JavaScriptTemplates

---

为了避免处理函数内部的额外替换调用,只需将正则表达式匹配:textbody.replace(/ {([^ {}] +)}/g,function(textMatched,key){....

3> Vilx-..：

---

我怀疑会有更高效的东西.替代方案是将其拆分为多个部分,然后连接,但我认为这不会有效.或许甚至更少,考虑到每个连接都会产生一个与其操作数大小相同的新字符串.

补充:这可能是最优雅的写作方式.此外 - 你还担心什么？内存使用情况？它很丰富,Javascript有一个像样的内存管理器.执行速度？然后你必须有一些巨大的字符串.恕我直言这很好.

---

嗯...有:链接

4> Lior Elrom..：

---

模板更换

一个快速简便的解决方案是使用String.prototype.replace方法.它需要第二个参数,可以是值或函数:

function replaceMe(template, data) {
    const pattern = /{\s*(\w+?)\s*}/g; // {property}
    return template.replace(pattern, (_, token) => data[token] || '');
}

示例:

const html = `
    

        
{title}
        
My name is {name}
        
    
`;

const data = {
    title: 'My Profile',
    name: 'John Smith',
    url: 'http://images/john.jpeg'
};

并称之为:

replaceMe(html, data);