Question

我将一些HTML内容保存为字符串。

我想遍历该字符串中的每个标题标记并获取其内部文本。

let str = `<h1>topic 1</h1><p>desc of topic 1</p><h1>topic 2</h1><p>desc of topic 2</p>`;

const innerHTMLarr = str.match(/<h1>(.*?)<\/h1>/g).map(x => x);

console.log(innerHTMLarr)

数组带有整个标题文本，如何获取内部文本？

不介意使用jQuery。

Answer 1

在/<\/?h1>/g内尝试map()，将所有<h1>和<\h1>替换为''，如下所示：

let str = `<h1>topic 1</h1><p>desc of topic 1</p><h1>topic 2</h1><p>desc of topic 2</p>`;

const innerHTMLarr = str.match(/<h1>(.*?)<\/h1>/g).map(val => {
   return val.replace(/<\/?h1>/g,'');
});
console.log(innerHTMLarr)

Answer 2

您可以在循环中使用exec()，直到没有匹配为止。

编辑：减少代码

＆＃13;

let pattern = /<h1>(.*?)<\/h1>/g;
let str = `<h1>topic 1</h1><p>desc of topic 1</p><h1>topic 2</h1><p>desc of topic 2</p>`;

let match;

while (match = pattern.exec(str))
    console.log(match[1]);

＆＃13;

Answer 3

应用Javascript global match with capturing groups的解决方案：

let str = `<h1>topic 1</h1><p>desc of topic 1</p><h1>topic 2</h1><p>desc of topic 2</p>`;

let regexpr = /<h1>(.*?)<\/h1>/g;

let match = regexpr.exec(str);

while(match !== null) {
    console.log(match[1]);
    match = regexpr.exec(str);
}

Answer 4

使用jQuery，您可以通过以下方式执行此操作：

＆＃13;

    let str = '<h1>topic 1</h1><p>desc of topic 1</p><h1>topic 2</h1><p>desc of topic 2</p>';
    html = $.parseHTML( str );
    innerHTMLarr = [], k=0;
    $.each( html, function( i, el ) {
    	if(el.nodeName.startsWith('H')) 
        	innerHTMLarr[k++] = el.innerHTML;
    });    
    console.log(innerHTMLarr);

＆＃13;

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

＆＃13;

循环遍历字符串中的html标记并将内部文本添加到数组中

4 个答案: