如何使用 regExp 获取 html 内容？答案

【问题标题】：How can i get html content with regExp?如何使用 regExp 获取 html 内容？
【发布时间】：2018-07-02 10:15:32
【问题描述】：

var str = '<h2 id="test1">11</h2><h2 id="test2">22</h2>'
var arr1 = ["test1","test2"]
var arr2 = ["11","22"]

如何从 str 获取 arr1/arr2？

【问题讨论】：

Obligatory

标签： javascript regex

【解决方案1】：

在现实生活中，您感兴趣的元素可能与其他元素交织在一起元素，也有例如id 属性。因此，在id=" 到下一个" 之后获取文本的正则表达式可能不是够了。

情况更糟，当你想检索文本内容时元素，尤其是如果它包含自己的子元素。

所以在 HTML 的情况下，它通常更容易和更自然地使用 DOM 方法和属性，而不是正则表达式。

你可以例如创建一个 DOM 元素并设置其内部 HTML（来自您的字符串）。

然后，您可以检索其子元素，例如按标签名称并在一个循环。

然后（在循环中），拥有每个当前元素，你可以得到它的任何一个 attribute 或 inner text 并将其推入相应的数组（之前创建）。

因此，演示使用方法的示例 Javascript 片段如下所示：

<script>
var str = '<h2 id="test1">11</h2><h2 id="test2">22</h2>';
var el = document.createElement('div');
el.innerHTML = str;
var elems = el.getElementsByTagName('h2');
var arr1 = [], arr2 = [];
for (var i = 0; i < elems.length; i++) {
  var currElem = elems[i];
  arr1.push(currElem.getAttribute("id"));
  arr2.push(currElem.innerText);
}
document.write('arr1: ' + arr1);
document.write('<br/>');
document.write('arr2: ' + arr2);
</script>

当然，您的最终目标不是将数组写入文档，而是使其中任何你想要的用途，所以我写了document.write 仅用于演示目的。

【讨论】：

【解决方案2】：

使用以下正则表达式获取您的 ID

var str = '<h2 id="123"></h2><h2 id="123"></h2>'; 
var res = str.match(/(id="(.*?)(\"))/g);

【讨论】：

【解决方案3】：

你可以使用这个代码，它会返回你想要的。

<script type="text/javascript">

    var str1 = '<h2 id="test1">11</h2><h2 id="test2">22</h2>';
    var str2 = '<h2 id="test1">11</h2><h2 id="test2">22</h2>';
    var pattern_id = /id=\"([a-zA-Z0-9-]+)\"/;
    var pattern_value = /\>(\d+)\</;
    var id_array = [];
    var value_array = [];

    do {
         var array = str1.match(pattern_id);
         if(array != null)
         {
            id_array.push(array[1]);
            str1 = str1.replace(pattern_id, '');
         }
    }while(array != null);

    do {
         var array = str2.match(pattern_value);
         if(array != null)
         {
            value_array.push(array[1]);
            str2 = str2.replace(pattern_value, '');
         }
    }while(array != null);

    console.log(id_array); // id are stored here ex: test1, test2
    console.log(value_array); // value are stored here, 11, 22

</script>

【讨论】：