如何将字符串中${something.xx}表达式替换为指定HTML input标签

实现思路 #

核心使用带捕获分组的正则表达式完成一次性替换，无需多次链式调用：

• 正则匹配规则：精准匹配${something.xxx}格式的表达式，同时捕获两个关键内容：
  • 大括号内完整的属性值（用于input的data-value属性）
  • 去掉something.前缀后的剩余内容（用于input的value属性）

代码实现 #

JavaScript 版本 #

你提到的replaceAll方法可直接配合正则使用，以下是可直接运行的实现：

const input = '"the quick ${something.brown.fox} jumps over the ${something.lazy.dog}"';
// 正则带全局匹配标识，两个捕获组分别对应完整内容、去前缀内容
const regex = /\$\{(something\.([^}]+))\}/g;
let result = input.replaceAll(regex, '<input type="button" disabled="" data-value="$1" value="$2" />');
// 如需去掉输入首尾的双引号，加上下面这行即可匹配你给出的期望输出格式
result = result.replace(/^"|"$/g, '');

console.log(result);
/* 输出：
the quick <input type="button" disabled="" data-value="something.brown.fox" value="brown.fox" /> jumps over the <input type="button" disabled="" data-value="something.lazy.dog" value="lazy.dog" />
*/

Python 版本 #

如果使用Python实现，代码如下：

import re

input_str = '"the quick ${something.brown.fox} jumps over the ${something.lazy.dog}"'
regex = r'\$\{(something\.([^}]+))\}'
result = re.sub(regex, r'<input type="button" disabled="" data-value="\1" value="\2" />', input_str)
# 去掉首尾双引号
result = result.strip('"')

print(result)

正则规则说明 #

• \$\{：匹配固定前缀${，$和{属于正则特殊字符，需要加反斜杠转义
• (something\.([^}]+))：两层捕获分组
  • 外层分组捕获完整的something.xxx内容，对应替换时的$1（JS）或\1（Python）
  • 内层分组捕获something.之后到}之前的所有内容，对应替换时的$2（JS）或\2（Python）
• \}：匹配结尾的}，特殊字符需转义
• 末尾的g（JS）是全局匹配标识，确保替换所有符合规则的表达式而非仅第一个

内容的提问来源于stack exchange，提问作者baba-dev