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(),即时反馈是否生效



















