捕获<pre> </pre>标记之间的所有内容

Question

我正在读一个.html文件：

const htmlin = String(fs.readFileSync(inputHtml) || '');

const splitted = htmlin.split(/<pre.*>/);
splitted.shift();

const justPost = splitted.join('').split('</pre>');
justPost.pop();

但我正在寻找一种方法来匹配所有的文本

aaa <pre> xxx </pre> bbb <pre> foo </pre> ccc

也可以与外部的文本匹配。这样我就可以得到两个数组：

['aaa ', ' bbb ', ' ccc']

和

[' xxx ', ' foo ']

如何使用正则表达式或其他方法来完成此操作？

Answer 1

一种方法是使用正则表达式替换函数和捕获组。

<pre>(.*?)(?=<\/pre>)|(?:^|<\/pre>)(.*?)(?=$|<pre>)

• <pre>(.*?)(?=<\/pre>) -匹配pre标记之间的文本。( )
• (?:^|<\/pre>)(.*?)(?=$|<pre>) g1 -匹配pre标记之外的文本。(g2)

​

let str = `aaa <pre> xxx </pre> bbb <pre> foo </pre> ccc`
let inner = []
let outer = []

let op = str.replace(/<pre>(.*?)(?=<\/pre>)|(?:^|<\/pre>)(.*?)(?=$|<pre>)/g, function (match,g1,g2){
  if(g1){
    inner.push(g1.trim())
  } 
  if(g2){
    outer.push(g2.trim())
  }
  return match
})

console.log(outer)
console.log(inner)

​

Answer 2

您可以使用dom或domparser，而不使用regex。

例如，创建一个div并将innerHTML属性设置为您的html。然后循环子节点并获取innerHTML或textContent。

例如：

​

let htmlString = `aaa <pre> xxx </pre> bbb <pre> foo </pre> ccc`,
  pre = [],
  text = [];
let div = document.createElement('div');
div.innerHTML = htmlString;

div.childNodes.forEach(x => {
  if (x.nodeType === Node.TEXT_NODE) {
    text.push(x.textContent.trim())
  }
  if (x.nodeName === "PRE") {
    pre.push(x.innerHTML.trim());
  }
});

console.log(pre);
console.log(text);

​