Question

我尝试了https://www.regex101.com/#javascript工具，以及类似的stackoverflow question，但尚未能够解决/理解这一点。希望这里有人可以解释我做错了什么。我尽可能详细地逐步创建了一个例子。

我的目标是能够解析自定义属性，例如：

我写了一些jquery代码来获取属性和值，然后想对结果运行正则表达式。

下面是html / js，输出屏幕截图和正则表达式截图，它说我的正则表达式查询应该符合我的预期。

预期结果：＆＃39; valOne＆＃39; 结果：＆＃39;：valOne＆＃39; ＆lt; - 为什么我得到一个＆＃39;：＆＃39;字符？

<html>
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
    <script>
      $(document).ready(function() {
        $('[customAttr]').each(function(){

          var attrValues = $(this).attr('customAttr');

          var regEx_attrVal = /[\w:]+?(?=;|$)/g;
          var regEx_preColon = /[\w]+?(?=:)/g;
          var regEx_postColon = /:(\w*)+?(?=;|\b)/g;

          var customAttrVal = attrValues.match(regEx_attrVal);
          var customAttrVal_string = customAttrVal.toString();
          console.log('customAttrVal:');
          console.log(customAttrVal);
          console.log('customAttrVal_string: '+customAttrVal_string);

          var preColon = customAttrVal_string.match(regEx_preColon);
          preColon_string =preColon.toString();
          console.log('preColon');
          console.log(preColon);
          console.log('preColon_string: '+preColon_string);

          var postColon = customAttrVal_string.match(regEx_postColon);
          postColon_string = postColon.toString();
          console.log('postColon');
          console.log(postColon);
          console.log('postColon_string: '+postColon_string);

          console.log('pre: '+preColon_string);
          console.log('post: '+postColon_string);
        });
      });
    </script>
  </head>
  <body>
      <div customAttr="val1:valOne">
        Test custom attr
      </div>
  </body>
</html>

Answer 1

我没有跋涉所有代码，但您需要了解有关正则表达式的内容是$0和$1之间的区别。

$0以蓝色突出显示。这就是正则表达式匹配的整个部分。

你想要$1。这就是括号捕获的匹配的位置。

详细了解捕获组here。

var match = myRegexp.exec(myString);
alert(match[1]);  // This accesses $1

Answer 2

当您使用带有全局修饰符的正则表达式String#match()时，所有捕获组（regex101.com右下角“匹配信息”窗格中的那些字符串是捕获的值进入ID为1或更高的组）将丢失，您只能获得匹配值的数组。

您需要从正则表达式中删除/g并按如下方式修复它们：

var regEx_attrVal = /[\w:]+(?=;|$)/; var regEx_preColon = /\w+(?=:)/; var regEx_postColon = /:(\w+)(?=;|\b)/;

然后，在获取regEx_postColon捕获值时，请使用

var postColon = customAttrVal_string.match(regEx_postColon); var postColon_string = postColon !== null ? postColon[1] : "";

首先，检查是否存在postColon正则表达式匹配，然后使用postColon[1]访问捕获的值。

查看完整的更新代码：

$(document).ready(function() { $('[customAttr]').each(function() { var attrValues = $(this).attr('customAttr'); var regEx_attrVal = /[\w:]+(?=;|$)/; var regEx_preColon = /\w+(?=:)/; var regEx_postColon = /:(\w+)(?=;|\b)/; var customAttrVal = attrValues.match(regEx_attrVal); var customAttrVal_string = customAttrVal.toString(); console.log('customAttrVal:'); console.log(customAttrVal); console.log('customAttrVal_string: ' + customAttrVal_string); var preColon = customAttrVal_string.match(regEx_preColon); preColon_string = preColon.toString(); console.log('preColon'); console.log(preColon); console.log('preColon_string: ' + preColon_string); var postColon = customAttrVal_string.match(regEx_postColon); var postColon_string = postColon !== null ? postColon[1] : ""; console.log('postColon'); console.log(postColon); console.log('postColon_string: ' + postColon_string); console.log('pre: ' + preColon_string); console.log('post: ' + postColon_string); }); });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div customAttr="val1:valOne"> Test custom attr </div>

Answer 3

使用数据属性。你可以在其中存储json字符串并像对象一样访问它们。

<强> HTML

<div id='div' data-custom='{"val1":"valOne","a":"b"}'></div>

<强> JQ

$("#div").data("custom").val1; //valOne

$("#div").data("custom").a; //b

Answer 4

我想这是您正在寻找的regex pattern：

(?!(.*?):).*

<强>解释

(.*?:)选择所有类型的值和任意次数以及包含的匹配项（:) simbol
(?! :)选择第一个模式的反向值，其有点否定
( ).*在评估后选择所有类型的值

你也可以用Jquery substring做同样的事情，这对我来说是最简单的方法，就像这样：

How to substring in jquery

javascript正则表达式 - 在冒号后获取值，不带冒号

4 个答案: