27. 正则表达式与文本处理

一、场景说明

这个页面把一个常见应用场景拆成可运行的小案例。你可以先操作演示区，再阅读右侧代码，最后尝试底部练习。

学习重点：不要只复制代码，要观察“数据 → 状态 → 渲染 → 事件”的关系。

二、可运行演示

输入文本

三、知识点提醒

`test()` 用于判断是否匹配，`match()` 用于提取。
`g` 表示全局匹配，可以找到多个结果。
正则适合轻量文本处理，复杂 HTML 不建议用正则解析。

四、练习建议

增加手机号提取。
把链接替换成 `<a>` 标签。

完整 JS 示例

本页实际运行的代码保存在 assets/js/demos/27-regex-text.js，下面同步展示，方便学习和复制。

// 页面 27：正则表达式提取文本
const regexText = document.querySelector('#p27-text');
const regexOutput = document.querySelector('#p27-output');

const patterns = {
  email: /[\w.-]+@[\w.-]+\.\w+/g,
  url: /https?:\/\/[^\s]+/g,
  extraSpaces: /\s+/g
};

function extractTextInfo(text) {
  const emails = text.match(patterns.email) || [];
  const urls = text.match(patterns.url) || [];
  const cleaned = text.replace(patterns.extraSpaces, ' ').trim();
  return { emails, urls, cleaned };
}

document.querySelector('#p27-extract').addEventListener('click', () => {
  const result = extractTextInfo(regexText.value);
  regexOutput.textContent = [
    `邮箱：${result.emails.join(', ') || '无'}`,
    `链接：${result.urls.join(', ') || '无'}`,
    `清理空格后：${result.cleaned}`
  ].join('\n');
});