Handlebars.js如何清理<p>标签内用户名占位符的多余字符？

要实现只对{{username}}占位符应用字符清理逻辑，你需要自定义Handlebars Helper——内置的trim、chop这类helper满足不了复杂的匹配需求。下面分两种场景给出实现方案：

方案1：从原始username中提取有效内容 #

如果你想从Ms.+-@!jenny.caroz+-!#里提取出jenny.caroz，可以写一个匹配字母、数字和点的helper，或者精准匹配包含firstname+lastname的片段：

<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
<script src="handlebars-v4.7.7.js"></script>
</head>
<body>
<div id="welcome"></div>
<script type="text/javascript">
// 自定义清理用户名的Helper
Handlebars.registerHelper('cleanUsername', function(username) {
  // 方式A：提取所有字母、数字和点的组合（适用于有效内容无特殊字符的情况）
  // const cleaned = username.match(/[a-zA-Z0-9.]+/g).find(str => str.includes('jenny') && str.includes('caroz'));
  
  // 方式B：精准匹配firstname.lastname格式的片段（更可靠）
  const matchResult = username.match(/jenny\.caroz/);
  return matchResult ? matchResult[0] : username; // 匹配失败时返回原始值
});

var myInfo = "<p>This is a notification that a new user has just registered: First name: {{firstname}}, Last name: {{lastname}}, E-mail: {{email}}, User name: {{cleanUsername username}}</p>";
var template = Handlebars.compile(myInfo);
var data = template({firstname: "jenny", lastname: "caroz", email: "jenny.caroz@example.com", username: "Ms.+-@!jenny.caroz+-!#"});
document.getElementById("welcome").innerHTML +=data;
</script>
</body>
</html>

方案2：直接用firstname和lastname生成目标用户名 #

如果不需要依赖原始username的内容，直接用已知的firstname和lastname拼接，能彻底避免特殊字符问题，稳定性更高：

<!DOCTYPE html>
<html>
<head>
<title>Hello</title>
<script src="handlebars-v4.7.7.js"></script>
</head>
<body>
<div id="welcome"></div>
<script type="text/javascript">
// 自定义Helper，根据firstname和lastname生成用户名
Handlebars.registerHelper('generateUsername', function(firstname, lastname) {
  // 生成jenny.caroz格式
  return `${firstname}.${lastname}`;
  // 如果要生成jennycaroz，换成：return firstname + lastname;
});

var myInfo = "<p>This is a notification that a new user has just registered: First name: {{firstname}}, Last name: {{lastname}}, E-mail: {{email}}, User name: {{generateUsername firstname lastname}}</p>";
var template = Handlebars.compile(myInfo);
var data = template({firstname: "jenny", lastname: "caroz", email: "jenny.caroz@example.com", username: "Ms.+-@!jenny.caroz+-!#"});
document.getElementById("welcome").innerHTML +=data;
</script>
</body>
</html>

关键说明 #

• 自定义Helper是Handlebars处理复杂数据转换的标准方式，你可以根据需求修改正则规则或者拼接逻辑。
• 方案2比方案1更可靠，因为它不依赖原始username的格式，只要firstname和lastname正确就能生成目标内容。

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