javascript - 高效的 Javascript 字符串替换

Question

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

<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 是包含数据的对象。
• 使用两个参数replace来做替换:
• 第一个是搜索所有 %keys%(或 {keys}，如果您使用替代版本)的正则表达式。键可以是A-Z、a-z、0-9和下划线_的组合。
• 第二个是匿名函数，每次匹配都会被调用。
• 匿名函数在数据对象中搜索正则表达式找到的键。如果在数据中找到该键，则返回该键的值，该值将替换最终输出中的键。如果未找到 key ，则返回一个空字符串。

模板示例:

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

调用示例:

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