如何在Handlebars中实现空格与 的替换？

嘿，我来帮你搞定这个Handlebars的字符串替换问题～

首先得明确一点：Handlebars本身没有内置replace这个辅助函数，所以你之前尝试的{{replace ...}}写法肯定不会生效，得自己注册自定义的Helper来实现需求。

需求1：把API传入的 替换回普通空格 #

先注册一个处理这个逻辑的Helper，然后在模板里调用它：

1. 注册Helper（在你的script标签里添加这段代码）：

Handlebars.registerHelper('unescapeNbsp', function(str) {
  // 全局替换所有的 为普通空格
  return str.replace(/ /g, ' ');
});

2. 在模板里使用：

<td><button onclick="init('{{unescapeNbsp goal}}')">{{unescapeNbsp goal}}</button></td>

这里注意给onclick的属性值加上双引号，避免因为字符串里的空格导致HTML解析出错。

需求2：把字符串里的普通空格替换成  #

同样注册对应的Helper：

1. 注册Helper：

Handlebars.registerHelper('escapeSpaceToNbsp', function(str) {
  // 全局替换所有空格为 
  return str.replace(/ /g, ' ');
});

2. 在模板里使用：

<td><button onclick="init('{{goal}}')">{{escapeSpaceToNbsp goal}}</button></td>

完整的代码示例 #

结合你的原始代码，修改后大概是这样：

<html>
<head>
  <!-- 先引入Handlebars库，确保路径正确 -->
  <script src="https://cdn.jsdelivr.net/npm/handlebars@4.7.7/dist/handlebars.min.js"></script>
  <script type="text/javascript">
    // 注册替换&nbsp;为空格的Helper
    Handlebars.registerHelper('unescapeNbsp', function(str) {
      return str.replace(/&nbsp;/g, ' ');
    });

    // 注册替换空格为&nbsp;的Helper
    Handlebars.registerHelper('escapeSpaceToNbsp', function(str) {
      return str.replace(/ /g, '&nbsp;');
    });

    function init (goalName) {
      console.log('came inside the init function with goalName == ' + goalName)
    }
  </script>
</head>
<body>
  <table>
    <thead></thead>
    <tbody>
      {{#goalSetValues}}
        <!-- 根据你的需求选择其中一种写法 -->
        <td><button onclick="init('{{unescapeNbsp goal}}')">{{unescapeNbsp goal}}</button></td>
        <!-- <td><button onclick="init('{{goal}}')">{{escapeSpaceToNbsp goal}}</button></td> -->
      {{/goalSetValues}}
    </tbody>
  </table>
</body>
</html>

额外提醒 #

• 如果你是在Node.js环境使用Handlebars（比如后端渲染），注册Helper的逻辑是一样的，只是引入Handlebars的方式变成const Handlebars = require('handlebars')
• 正则里的/g标记一定要加，不然只会替换第一个匹配的字符，没法全局替换所有的目标字符串

内容的提问来源于stack exchange，提问作者IAMTubby