Question

在文字编辑器summernote中，我尝试检测是否输入了特定模式，对于这种情况，字符串以{{，{%开头并与}}关闭，分别为%}，如果匹配，我将其设置为localStorage。

所以我尝试了我的代码并没有这样的效果：

＆＃13;

$(document).ready(function() {
  $('.jinja2Code').summernote({
    /* update key word*/
    callbacks: {
      onChange: function(contents, $editable) {
        // remove html tag
        contents = contents.replace(/<\/?[^>]+(>|$)/g, "");
        var regex1 = /^\{\{.*\}\}$/g; //  match for {# {{any character}} #}
        var regex2 = /^\{\%.*\%\}$/g; //  match for {% set variable_name = value %} #}
        var key = '';
        // update to local storage
        if (regex1.test(contents)) {
          console.log('regex1 matched');
          key = contents.replace(/\[\{\{\]+\[\}\}\]/g, ""); // {# remove {{ and }} #}
          console.log('key: ' + key);
          localStorage.setItem(key, contents);
        }
        if (regex2.test(contents)) {
          console.log('regex2 matched');
          key = contents.replace(/\{\%\%\}/g, "") // {# remove {%, set, =, and %} #}
          localStorage.setItem(key, contents);
        }
      }
    }
  });
})

＆＃13;

<!-- Include BS and FA -->
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.js"></script>
  
  <textarea name="" class="jinja2Code" cols="10" rows="10" class="form-control"></textarea>

＆＃13;

我希望它是：

Regex1 ：

输入＆＃34; {{hello}}＆＃34;，结果：key为hello，contents为{{hello}}

Regex2 ：

输入＆＃34; {％set variableName =＆＃39;你好＆＃39; ％}＆＃34;，结果：key为variablename，contents为hello。

然后从上面，我将localStorage保存为localStorage.setItem(key, contents);。

但是，regex1匹配，即使我只键入{{}}，即使我键入{%%}也匹配，key不会按预期替换字符。

我的脚本中缺少什么错误，我如何纠正它以达到上述结果？

我有谷歌但不符合我的情况，而且我对正则表达非常了解。感谢。

Answer 1

。*表示任何字符零次或多次 =＆GT; /^ {{。}}}} $ /匹配{{}}

。+表示任何字符一次或多次

。+？意味着一次或多次不是贪婪的

关于贪婪和懒惰，你可以在这里阅读一些内容： http://www.rexegg.com/regex-quantifiers.html

因此，对于regex1（{{text}}），我会使用：

var regex1 = /^\{\{\s*?.+?\s*?\}\}$/g;

对于regex2（{％key set = value％}）：

/^\{\%\s*?set?s*?(\w+?)\s*?=\s*?(\w+?)\%\}$/g

如果您需要{％key set =＆＃39; value＆＃39; ％}

/^\{\%\s*?set?s*?(\w+?)\s*?=\s*?'(\w+?)'\%\}$/g

这意味着：

以{％：^ {\％

开头

然后可以有一个空格：\ s *？

单词set：set

然后可以有一个空格：\ s *？

由组中的字母，数字和_组成的变量名：（\ w +？）

然后可以有一个空格：\ s *？

现在a =：=

然后可以有一个空格：\ s *？

由组中的字母，数字和_组成的变量值：（\ w +？）

以％}结尾：\％} $

正则表达式中的groups（）可用于进行替换。 grous称为$ 1 und $ 2，依此类推。

在键和值中拆分{％set key = value％}并将其保存在本地存储中：

const result = contents.match(/^\{\%\s*?set?s*?(\w+?)\s*?=\s*?(\w+?)\%\}$/g);
if (result) {
    let key;
    let value;
    if (result.length > 1)
      key = result[1] ;
    }
    if (result.length > 2)
      value = result[2] ;
    }
    if (key && value) {
        localStorage.setItem(key, value);
    }
}

从{{text}}获取密钥并将其保存在本地存储中：

const result2 = contents.match(/^\{\{\s*?(\w+?)\s*?\}\}$/g);
if (result2) {
    let key;
    if (result2.length > 1)
      key = result2[1] ;
    }
    if (key) {
        localStorage.setItem(key, key);
    }
}

我希望它有效，遗憾的是我没时间测试它。

如何在文本编辑器中检测特定的正则表达式模式？

1 个答案: