LocalStorage 可持久保存用户正则过滤规则，需拆解 pattern 和 flags 并安全序列化为对象存储，读取时用 new RegExp 还原，配合校验、错误防护及 id 管理实现增删查改。
LocalStorage 可以用来持久保存用户在网页中设置的正则过滤规则，比如用于日志查看、文本筛选或表单校验等场景。关键在于把用户输入的正则表达式（含模式和标志）安全地序列化存储，并在读取时正确还原为 RegExp 实例。
存储正则表达式：拆解 pattern 和 flags
RegExp 对象不能直接存入 LocalStorage（会转成 [object Object]），必须手动提取其 source（正则本体）和 flags（如 gi）。建议用对象结构保存：
-
pattern：字符串形式的正则本体（如
"\d+"），注意用户输入需做基本校验，避免无效正则 -
flags：字符串形式的标志（如
"g"或"gi"），只允许g、i、m、s、u、y - 可选添加 name 或 desc 字段，方便用户识别记录
写入 LocalStorage：JSON 序列化 + 错误防护
使用 JSON.stringify() 存储数组（每项是一个正则配置对象），并包裹 try-catch 防止非法正则导致崩溃：
function saveRegexRule(pattern, flags = '', name = '') {
try {
// 简单校验：尝试构造 RegExp，捕获 SyntaxError
new RegExp(pattern, flags);
const rule = { pattern, flags, name, createdAt: Date.now() };
const list = JSON.parse(localStorage.getItem('regexRules') || '[]');
list.push(rule);
localStorage.setItem('regexRules', JSON.stringify(list));
} catch (e) {
console.warn('正则格式错误，未保存：', e.message);
}
}
读取并还原为 RegExp 实例
从 LocalStorage 读出后，对每条记录调用 new RegExp(rule.pattern, rule.flags) 即可得到可用的正则对象。注意：
- 用户输入的
pattern若含反斜杠（如匹配数字："\d+"），在 JSON 中已自动转义，还原时无需额外处理 - 建议封装一个安全的还原函数，跳过解析失败的旧记录
- 可结合
Array.map()批量生成 RegExp 实例供后续使用
管理多条记录：增删查改建议
实际应用中常需编辑或删除某条规则。推荐做法：
- 给每条规则加唯一
id（如用crypto.randomUUID()或时间戳+随机数），避免依赖索引 - 删除时按
id过滤数组再保存；更新时找到对应项修改属性后重存 - 提供「测试」按钮：用该正则对示例文本
.test()或.exec()，即时反馈是否生效
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
