将正则表达式拆分为数组

Question

我在多行上有一串元素（但如果需要，我可以将其更改为在一行上全部）并且我想将它拆分为<section>元素。我认为这很容易，只是str.split（正则表达式），甚至str.split（'<section'），但它不起作用。它永远不会打破这些部分。我尝试过使用正则表达式SecRegex = / <section。？> [\ s \ S]？</ section> /; var fndSection = result.split（SecRegex）;尝试var fndSection = result.split（'<section'）;我看过网络，从我发现的上述两种方法中的一种应该有效。结果='<chapter id="chap1"><para0><title></title></para0></chapter><chapter id="chap2"> <title>THEORY</title><section id="Thoery"><title>theory Section</title><para0 verstatus="ver"><title>Theory Para 0 </title><text>blah blah</text></para0></section><section id="Next section"><title>title</title><para0><title>Title</title><text>blah blah</text></para0></section><section id="More sections"><title>title</title><para0><title>Title</title><text>blah blah</text></para0></section><section id="section"><title>title</title><para0><title>Title</title><text>blah blah</text></para0></section><chapter id="chap1"><para0><title></title></para0></chapter><chapter id="chap1"><para0><title></title></para0></chapter><chapter> <title>Chapter Title</title><section id="Section ID"><title>Section Title</title><para0><title>Para0 Title</title><para>blah blah</para></para0></section><section id="Next section"><title>title</title><para0><line>Title</line><text>blah blah</text></para0></section><section id="More sections"><title>title</title><para0><list>Title</list><text>blah blah</text></para0></section>码SecRegex = /<section.*?>[\s\S]*?<\/section>/;var fndSection = result.split(SecRegex);console.log("result string " + fndSection);这是我从我的代码中得到的结果result string <chapter id="chap2"> <title>THEORY</title> , , , , <chapter id="chap1"> <para0> <title></title></para0> </chapter> result string <chapter id="chap1"> <para0> <title></title></para0> </chapter> result string <chapter如你看到的我想要的是一个<section>。*？</ section>字符串到数组中谢谢大家看这个并帮助我。我感谢你的帮助。

Answer 1

不要在HTML（或HTML的任何表兄弟）上使用RegEx。将您收集<section>s到NodeList中。将该NodeList转换为数组。将每个节点转换为字符串。这可以在一行中完成：

const strings = Array.from(document.querySelectorAll('section')).map(section => section.outerHTML);

以下演示是上述示例的细分。

// Collect all <section>s into a NodeList

const sections = document.querySelectorAll('section');

// Convert NodeList into an Array

const array = Array.from(sections);

/*

Iterate through Array -- on each <section>...

convert it into a String

*/

const strings = array.map(section => section.outerHTML);

// View array as a template literal for a cleaner look

console.log(`${strings}`);

// Verifying it's an array of mutiple elements

console.log(strings.length);

// Verifying that they are in fact strings

console.log(typeof strings[0]);

<chapter id="chap1">

  <para0>

    <title></title>

  </para0>

</chapter>

<chapter id="chap2">

  <title>THEORY</title>

  <section id="Thoery">

    <title>theory Section</title>

    <para0 verstatus="ver">

      <title>Theory Para 0 </title>

      <text>blah blah</text>

    </para0>

  </section>

  <section id="Next section">

    <title>title</title>

    <para0>

      <title>Title</title>

      <text>blah blah</text>

    </para0>

  </section>

  <section id="More sections">

    <title>title</title>

    <para0>

      <title>Title</title>

      <text>blah blah</text>

    </para0>

  </section>

  <section id="section">

    <title>title</title>

    <para0>

      <title>Title</title>

      <text>blah blah</text>

    </para0>

  </section>

  <chapter id="chap1">

    <para0>

      <title></title>

    </para0>

  </chapter>

  <chapter id="chap1">

    <para0>

      <title></title>

    </para0>

  </chapter>

  <chapter>

    <title>Chapter Title</title>

    <section id="Section ID">

      <title>Section Title</title>

      <para0>

        <title>Para0 Title</title>

        <para>blah blah</para>

      </para0>

    </section>

    <section id="Next section">

      <title>title</title>

      <para0>

        <line>Title</line>

        <text>blah blah</text>

      </para0>

    </section>

    <section id="More sections">

      <title>title</title>

      <para0>

        <list>Title</list>

        <text>blah blah</text>

      </para0>

    </section>

    <section id="section">

      <title>title</title>

      <para0>

        <title>Title</title>

        <text>blah blah</text>

      </para0>

    </section>

    <ipbchap>

      <tags></tags>

    </ipbchap>

Answer 2

您不需要拆分字符串 - 您希望从中提取与您的模式匹配的数据。你可以使用String#match。请注意，您需要添加g标志以获取所有匹配项：

但是，最好解析DOM并从中提取所需的信息 - 这很简单DOMParser：