如何在前端使用JavaScript将特定文本模式替换为HTML标签？

你可以用**正则表达式配合String.replace()**实现全局替换，把自定义的日期标记转换成带样式的HTML标签，具体实现如下：

核心代码 #

方式一：批量处理整个容器内容 #

// 获取目标容器
const container = document.querySelector('.wrap');
// 定义正则：匹配###YYYY-MM-DD###格式，捕获日期部分，全局匹配所有符合项
const dateRegex = /###(\d{4}-\d{2}-\d{2})###/g;
// 执行替换并更新容器内容
container.innerHTML = container.innerHTML.replace(dateRegex, '<span class="date">$1</span>');

方式二：精准处理每个figcaption元素 #

如果只需要替换figcaption内的标记，用这个更安全：

// 遍历所有目标figcaption
document.querySelectorAll('.wrap figcaption').forEach(el => {
  const dateRegex = /###(\d{4}-\d{2}-\d{2})###/g;
  el.innerHTML = el.innerHTML.replace(dateRegex, '<span class="date">$1</span>');
});

正则说明 #

• ###：匹配你自定义的前后分隔符（如果换其他符号，比如[[[和]]]，要转义特殊字符，改成/\[\[\[(\d{4}-\d{2}-\d{2})\]\]\]/g）
• (\d{4}-\d{2}-\d{2})：捕获YYYY-MM-DD格式的日期，$1在替换时会被捕获到的日期内容替换
• g：全局匹配标志，确保替换页面中所有符合模式的内容

自定义分隔符示例 #

如果改用@@@作为分隔符，只需要修改正则：

const dateRegex = /@@@(\d{4}-\d{2}-\d{2})@@@/g;

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