本文介绍如何使用正则表达式精准提取形如 {#...}content{/#} 结构中 content 部分的文本，并支持动态样式应用，适用于模板解析、轻量标记处理等场景。
本文介绍如何使用正则表达式精准提取形如 `{#...}content{/#}` 结构中 `content` 部分的文本，并支持动态样式应用，适用于模板解析、轻量标记处理等场景。
在前端开发中，常需从自定义标记字符串中提取特定区间的文本内容，例如解析 {#a83232}高亮文字{/#} 这类简易模板语法，从中获取颜色值与显示文本。最简洁、可靠的方式是使用正则表达式（RegExp）进行匹配——它专为模式识别而生，远比手动遍历字符高效准确。
以下是一个完整可运行的示例，实现从输入框中实时解析 {#color}text{/#} 格式，并将 text 显示在 <textarea></textarea> 中，同时应用对应颜色：
<input type="text" value="{#a83232}高亮文字{/#}"><br><br><textarea></textarea><script>
const input = document.querySelector('input');
const textArea = document.querySelector('textarea');
function process() {
// 正则说明：
// /{#([^}]+)}([^{}]+){\/#}/
// {# → 字面量 "{#"
// ([^}]+) → 捕获组1：1个及以上非"}"字符（即颜色值）
// } → 字面量 "}"
// ([^{}]+) → 捕获组2：1个及以上非"{"和"}"字符（即目标文本）
// {\/#} → 字面量 "{/#"（斜杠需转义）
const match = input.value.match(/{#([^}]+)}([^{}]+){\/#}/);
if (match) {
const [, color, content] = match; // 解构：跳过完整匹配项，取第1、2捕获组
textArea.value = content;
textArea.style.color = `#${color}`; // 自动补全 # 号（若输入已含 #，可改为 color.trim()）
} else {
textArea.value = '';
textArea.style.color = '';
}
}
input.addEventListener('input', process);
process(); // 初始化执行
</script>
✅ 关键注意事项：
- 正则中使用
[^}]+和[^{}]+而非.+?，可避免跨标签误匹配（如{#red}a{/#} and {#blue}b{/#}中不会越界捕获）； - 若字符串中可能存在多个匹配项，应改用
matchAll()并遍历迭代器； - 实际生产环境若需支持嵌套或复杂语法，建议使用专用解析器（如 marked、remark），而非正则；
- 颜色值若已含
#（如{#ff0000}...），正则中可调整为{#(#?)([^}]+)}并组合使用。
掌握这一模式，你便能快速构建轻量级文本标记系统——无需框架，仅靠原生 JS 与精心设计的正则，即可完成结构化内容提取与渲染。
