高效的 Javascript 字符串替换

Question

您好，我有一个 HTML 块，我将重复使用（在用户访问期间的不同时间，而不是一次）。我认为实现这一点的最佳方法是创建一个 HTML div，将其隐藏，并在需要时获取其 innerHTML 并对几个关键字执行 replace()。以 HTML 块为例...

<div id='sample'>
  <h4>%TITLE%</h4>
  <p>Text text %KEYWORD% text</p>
  <p>%CONTENT%</p>
  <img src="images/%ID%/1.jpg" />
</div>

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

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 秒执行一次。

提前致谢。

Answer 1

您似乎想使用模板。

//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}，如果您使用备用版本）的正则表达式。键可以是 A-Z、a-z、0-9 和下划线 _ 的组合。
• 第二个是一个匿名函数，每次匹配都会被调用。
• 匿名函数在数据对象中搜索正则表达式找到的键。 如果在数据中找到键，则返回键的值，该值将替换最终输出中的键。如果未找到密钥，则返回一个空字符串。

模板示例：

<div id="mytemplate">
  <p>%test%</p>
  <p>%word%</p>
</div>

调用示例：

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

Answer 2

您可能可以修改此代码以执行您想要的操作：

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

let template = `Hey {firstName},
    
    You recently requested your password.
    login: {login}
    password: {password}
    
    If you did not request your password, please disregard this message.
    `;

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

您可能还想查看JavaScriptTemplates

Answer 3

Template Replacement

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

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

###示例：

const html = `
  <div>
    <h4>{title}</h4>
    <p>My name is {name}</p>
    <img src="{url}" />
  </div>
`;

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

然后这样称呼它：

replaceMe(html, data);

Answer 4

我怀疑会有什么更有效的。另一种方法是将其分成几部分然后连接，但我认为这不会有多大效率。考虑到每个连接都会产生一个与其操作数大小相同的新字符串，甚至可能更少。

补充：这可能是最优雅的写法。此外——你在担心什么？内存使用情况？它很丰富，而且 Javascript 有一个不错的内存管理器。执行速度？那么你必须有一些巨大的字符串。恕我直言，这很好。

Answer 5

你的方法是实现穷人模板系统的标准方法，所以没问题。

不妨看看一些 JavaScript 模板库，例如 JST。

Answer 6

您可以通过链接替换而不是进行所有这些临时分配来提高效率。

即

with(document.getElementById('sample'))
{
  innerHTML = innerHTML.replace(a, A).replace(b, B).replace(c, C); //etc
}

Answer 7

如果您愿意使用Prototype library，他们有很好的内置模板功能。

看起来像：

element.innerHTML = (new Template(element.innerHTML)).evaluate({
    title: 'a title',
    keyword: 'some keyword',
    content: 'A bunch of content',
    id: 'id here'
})

如果您在循环中运行代码，这将特别好，因为创建 JSON 对象/Javascript 对象文字很容易。

不过，我预计速度不会提高。

此外，您需要将分隔符样式更改为 #{keyword} 而不是 %keyword%

Answer 8

这种方法生成可以缓存的函数模板：

function compileMessage (message) {

  return new Function('obj', 'with(obj){ return \'' +
    message.replace(/\n/g, '\\n').split(/{{([^{}]+)}}/g).map(function (expression, i) {
      return i%2 ? ( '\'+(' + expression.trim() + ')+\'' ) : expression;
    }).join('') + 
  '\'; }');

}

var renderMessage = compileMessage('Hi {{ recipient.first_name }},\n\n' +

'Lorem ipsum dolor sit amet...\n\n' +

'Best Regarts,\n\n' +

'{{ sender.first_name }}');


renderMessage({
  recipient: {
    first_name: 'John'
  },
  sender: {
    first_name: 'William'
  }
});

返回：

"Hi John,

Lorem ipsum dolor sit amet...

Best Regarts,

William"

Answer 9

Mustachejs 非常适合真正优雅的模板：

<div id='sample'>
  <h4>{{TITLE}}</h4>
  <p>Text text {{KEYWORD}} text</p>
  <p>{{CONTENT}}</p>
  <img src="images/{{ID}}/1.jpg" />
</div>

然后您可以像这样使用模板：

var template = document.getElementById(templateid).innerHTML;
var newHtml = Mustache.render(template, {
    TITLE: some_var_with_title,
    KEYWORD: some_var_with_keyword,
    CONTENT: some_var_with_content,
    ID: some_var_with_id
});
document.getElementById('sample').innerHTML = newHtml;

如果您从 Ajax 调用返回 JSON，这尤其适用 - 您可以直接将其传递给 Mustache.render() 调用。

轻微的变化允许在每个浏览器或服务器上运行相同的模板。详情请见https://github.com/janl/mustache.js。

Answer 10

试试这个：http://json2html.com/

它也支持复杂的 JSON 对象。

Answer 11

var template = "<div id='sample'><h4>%VAR%</h4><p>Text text %VAR% text</p><p>%VAR%</p><img src="images/%VAR%/1.jpg" /></div>";

var replace = function(temp,replace){
temp = temp.split('%VAR%');
for(var i in replace){
          if(typeof temp[i] != 'undefined'){
            temp[i] = temp[i] + replace[i];
          }
        }
   return temp.join('');
}

replace(template,['title','keyword','content','id'])