JavaScript 使用 console.log 标签之间的 RegEx 不起作用

Question

我有这个 html 结构：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" prefix="og: http://ogp.me/ns#">

<head profile="http://gmpg.org/xfn/11">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>

    <script>

        $(function(){
            var text = $('.chapter').html();            

            var str = text.match(/<\/blockquote>([\s\S]*?)<\/div>/);

            console.log(str);

        });

    </script>
    <style>

    </style>
</head>

<body>

    <div class="chapters">

        <div class="chapter">
            <blockquote>module-data A</blockquote>



            <p>Lorem ipsum dntore laborum! Laboriosam, ipsa!</p>

        </div>

        <div class="chapter">
            <blockquote>module-data B</blockquote>

            <strong>Part 1 – Introduction</strong>
            <ul>
                <li>Can we do something like this?</li>
                <li>Before doig it, we really do need to understand!</li>
            </ul>
            <strong>Part 2 – Java</strong>

        </div>

    </div>

</body>

我试图捕捉 <blockquote> 开始标记和 </div> 结束标记之间的任何内容，以便第一个匹配项将是我示例中的第一段：

Lorem ipsum dntore laborum！ Laboriosam, ipsa!

我测试过这个正则表达式：

/<\/blockquote>([\s\S]*?)<\/div>/

在 regex101 中它有效，但是当我尝试使用 chrome 中的检查工具记录匹配时，我在控制台中得到 null。

我认为我写的正则表达式可能是正确的，但我不确定为什么 console.log() returns null...

如有任何帮助，我们将不胜感激。

Answer 1

我认为这可能是您应该使用外部 div class 而不是内部 div 的问题。试试下面的代码。

 <script>

        $(function(){
            var text = $('.chapters').html(); 
            console.log(text);

            var str = text.match(/<\/blockquote>([\s\S]*?)<\/div>/);

            console.log(str);

        });

    </script>

Answer 2

用正则表达式匹配 HTML 是个坏主意。为什么不直接 select 元素？

$(".chapter").each( function () {
    var bq = $(this).find("blockquote");
    var elemsAfter = bq.nextAll();
    console.log(elemsAfter.text());
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="chapters">

  <div class="chapter">
    <blockquote>module-data A</blockquote>



    <p>Lorem ipsum dntore laborum! Laboriosam, ipsa!</p>

  </div>

  <div class="chapter">
    <blockquote>module-data B</blockquote>

    <strong>Part 1 – Introduction</strong>
    <ul>
      <li>Can we do something like this?</li>
      <li>Before doig it, we really do need to understand!</li>
    </ul>
    <strong>Part 2 – Java</strong>

  </div>

</div>

JavaScript 使用 console.log 标签之间的 RegEx 不起作用

JavaScript RegEx between tags not working using console.log

javascript

regex

web-inspector