如何用JS的replace与RegExp实现指定前缀字符串的整体字体标签替换？

核心思路 #

构造正则表达式匹配**以指定前缀开头、格式为「前缀-数字/数字」**的完整内容，再将匹配到的整段内容用黑色<FONT>标签包裹。

代码实现 #

首先转义匹配前缀中的正则特殊字符（如.、*、+等）避免语法错误，再构造目标正则执行替换：

// 转义正则特殊字符的工具函数
function escapeRegExp(str) {
  return str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
}

// 原始字符串
var font_str = "<FONT color='red'>aaa-1/2</br>bbb-1/3</br>aaa-1/20</FONT>";
// 指定匹配前缀
var match = 'aaa';

// 转义前缀并构造正则
var escapedMatch = escapeRegExp(match);
var regex = new RegExp(escapedMatch + '-\\d+/\\d+', 'g');

// 执行替换：$& 指代整个匹配到的内容
var result = font_str.replace(regex, "<FONT face='monospace' color='black'>$&</FONT>");

console.log(result);

正则说明 #

• escapedMatch：转义后的匹配前缀，确保特殊字符（如.、*）被识别为普通字符
• -\\d+/\\d+：匹配格式要求的-数字/数字部分，\d+表示一个或多个数字
• g：全局匹配标志，替换所有符合条件的内容
• $&：替换时指代整个匹配到的字符串，实现整段内容的包裹

执行结果 #

输出结果与期望一致：

"<FONT color='red'><FONT face='monospace' color='black'>aaa-1/2</FONT></br>bbb-1/3</br><FONT face='monospace' color='black'>aaa-1/20</FONT></FONT>"

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