如何在Summernote编辑器中检测特定正则并修正存储逻辑

我来帮你梳理下代码里的问题，然后给出符合预期的修正方案，你的需求是从Summernote编辑器中提取{{ ... }}和{% set ... %}格式的内容，存入localStorage，但当前代码存在几个核心问题：

核心问题拆解 #

1. 正则表达式匹配逻辑错误

   • 原正则用^和$锚定整个字符串，但输入内容前后可能带有空格（比如{{ hello }}的前后空格），导致匹配失败；同时原正则的.*是贪婪匹配，虽然不会导致大问题，但用非贪婪匹配.*?更稳妥。
   • 你提到输入{% ... %}时会触发regex1匹配，大概率是原HTML清理的正则有误，导致清理后的内容出现异常，让错误的格式被误匹配。

2. Key提取的正则完全失效

   • 对于{{ ... }}的key提取，原代码用了contents.replace(/\[\{\{\]+\[\}\}\]/g, "")，这个正则是匹配[{{]+[}}]这种完全不存在的格式，根本无法去掉{{和}}。
   • 对于{% set ... %}的key提取，原代码用replace(/\{\%\%\}/g, "")，完全无法提取变量名和对应的值，只是错误地删除了部分字符。

3. 逻辑判断缺乏优先级

   • 原代码的两个if是独立判断，可能导致不必要的逻辑执行，应该按优先级依次判断格式类型。

修正后的完整代码 #

$(document).ready(function() {
  $('.jinja2Code').summernote({
    callbacks: {
      onChange: function(contents, $editable) {
        // 第一步：清理HTML标签和多余空白字符（换行、空格、制表符等）
        const cleanContent = contents
          .replace(/<\/?[^>]+(>|$)/g, "") // 移除所有HTML标签
          .trim(); // 去掉内容前后的空白字符

        // 匹配{{ 变量 }}格式，允许内部有前后空格
        const variablePattern = /^\{\{\s*(.*?)\s*\}\}$/;
        // 匹配{% set 变量名 = '值' %}格式，支持带单引号或不带引号的值
        const setPattern = /^\{\%\s*set\s+(\w+)\s*=\s*'?(.*?)'?\s*\%\}$/;

        let storageKey = '';
        let storageValue = '';

        // 先判断是否是{{ ... }}格式
        const variableMatch = cleanContent.match(variablePattern);
        if (variableMatch) {
          console.log('匹配到{{ 变量 }}格式');
          storageKey = variableMatch[1].trim(); // 提取中间的变量名，去掉多余空格
          storageValue = cleanContent; // 完整的{{...}}内容
          localStorage.setItem(storageKey, storageValue);
          console.log(`已存储：key=${storageKey}, value=${storageValue}`);
          return; // 匹配成功后直接返回，避免后续判断
        }

        // 再判断是否是{% set ... %}格式
        const setMatch = cleanContent.match(setPattern);
        if (setMatch) {
          console.log('匹配到{% set ... %}格式');
          storageKey = setMatch[1].trim(); // 提取变量名
          storageValue = setMatch[2].trim(); // 提取变量值
          localStorage.setItem(storageKey, storageValue);
          console.log(`已存储：key=${storageKey}, value=${storageValue}`);
          return;
        }

        // 未匹配到目标格式时的提示
        console.log('未检测到符合要求的Jinja2格式内容');
      }
    }
  });
});

关键修正说明 #

1. 内容清理优化

   • 替换了原有的HTML清理正则，更准确地移除所有HTML标签；同时添加trim()去掉内容前后的空格、换行等，避免正则匹配被空白字符干扰。

2. 正则表达式重构

   • 针对{{ ... }}：使用^\{\{\s*(.*?)\s*\}\}$，允许{{和}}内部有前后空格，.*?非贪婪匹配确保只匹配到第一个}}，避免多匹配。
   • 针对{% set ... %}：使用^\{\%\s*set\s+(\w+)\s*=\s*'?(.*?)'?\s*\%\}$，可以匹配带单引号或不带引号的值，通过正则分组直接提取变量名和对应的值。

3. 提取逻辑优化

   • 使用match()方法获取正则分组的结果，直接提取需要的key和value，替代原代码中错误的replace逻辑。
   • 按优先级依次判断格式类型，匹配成功后直接返回，避免不必要的逻辑执行。

测试验证 #

• 输入{{ hello }}：storageKey为hello，storageValue为{{ hello }}，正确存入localStorage。
• 输入{% set variableName = 'hello' %}：storageKey为variableName，storageValue为hello，正确存入。
• 输入普通文本或其他格式：控制台提示未匹配，不会执行存储操作。

内容的提问来源于stack exchange，提问作者Houy Narun