本文详解如何使用正则表达式精准提取嵌套在自定义分隔符（如 {#} 和 {/#}）之间的文本内容，并提供可运行的 HTML/JS 示例、匹配逻辑说明及常见注意事项。
本文详解如何使用正则表达式精准提取嵌套在自定义分隔符（如 `{#}` 和 `{/#}`）之间的文本内容，并提供可运行的 html/js 示例、匹配逻辑说明及常见注意事项。
在前端开发或模板解析场景中，常需从字符串中提取被特定标记包裹的内容，例如从 {#red}Hello World{/#} 中提取 Hello World（或同时捕获样式指令 red）。最简洁、可靠的方式是使用正则表达式（RegExp），而非手动遍历字符——这正是本教程的核心方法。
✅ 推荐正则方案（支持单次匹配）
const pattern = /{#([^}]+)}([^{}]+){\/#}/;
const str = "{#a83232}text{/#}";
const match = str.match(pattern);
if (match) {
const color = match[1]; // "a83232"
const content = match[2]; // "text"
console.log(`Color: ${color}, Content: ${content}`);
}正则解析：
-
{#([^}]+)}：匹配{#+ 一个或多个非}字符（捕获为组1，即指令/参数）+}； -
([^{}]+)：匹配 一个或多个既非{也非}的字符（捕获为组2，即目标文本）； -
{\/#}：匹配字面量{/#}（\/转义/）。
⚠️ 注意：此模式假设
{#}与{/#}之间不嵌套其他{或}。若需支持嵌套（如{#bold}{#italic}nested{/#}{/#}），则需更复杂的递归正则或解析器，超出基础需求范围。
? 完整可运行示例（HTML + JS）
<input type="text" value="{#a83232}text{/#}" id="input" />
<br><br>
<textarea id="output" rows="3" cols="40" placeholder="提取的内容将显示在此..."></textarea>
<script>
const input = document.getElementById('input');
const output = document.getElementById('output');
function extractAndApply() {
const str = input.value;
const match = str.match(/{#([^}]+)}([^{}]+){\/#}/);
if (match) {
const [, color, text] = match; // 解构：跳过全匹配项，取组1和组2
output.value = text;
output.style.color = `#${color}`; // 自动补 `#` 前缀以适配 CSS
} else {
output.value = '未匹配到有效格式：请确保输入形如 {#xxx}content{/#}';
output.style.color = '';
}
}
input.addEventListener('input', extractAndApply);
extractAndApply(); // 初始化执行
</script>? 关键注意事项
-
贪婪 vs 非贪婪：上述正则使用
[^{}]+显式排除花括号，比.*?更安全，避免跨标记误匹配； -
转义必要性：
{、}、/在正则中有特殊含义，必须用\{、\}、\/转义（或置于字符类中如[^}]）； -
多匹配处理：若字符串含多个
{#}...{/#}片段，改用str.matchAll(pattern)并遍历迭代器； -
空格与换行：如需匹配含换行的内容，将
[^{}]+替换为[\s\S]*?（非贪婪匹配任意字符），但需谨慎验证边界。
掌握这一模式后，你可轻松适配其他分隔符（如 [[/]]、/<code>%>），只需调整正则中的字面量部分。正则不是“魔法”，而是结构化文本提取的工业级标准工具——值得投入时间熟练掌握。
