如何使用正则表达式拆分html标签字符串

Question

我需要使用<p> 标签来拆分它

  let val = '<p style={{marginTop:40px}}>ABC</P><p style={{marginTop:40px}}>ABC</P><p style={{marginTop:40px}}>ABC</P>'

需要这个

arr= ['<p style={{marginTop:40px}}>ABC</P>','<p style={{marginTop:40px}}>ABC</P>','<p style={{marginTop:40px}}>ABC</P>']

Answer 1

您可以在 p 标记的末尾添加一个字符串。

let val = '<p style={{marginTop:40px}}>ABC</P><p style={{marginTop:40px}}>ABC</P><p style={{marginTop:40px}}>ABC</P>'


// Replace </p> with </p>###
val = val.replaceAll('</P>', '</p>###');

// Split on the newly added sign
let split = val.split('###');

// Filter out empty lines
newArr = split.filter((a) => a);

// Show result
console.log(newArr)

Answer 2

如果元素之间的连接有明显的模式，你可以这样做

在这里，您依赖它总是在元素之间的交界处读取 准确 </P><p。您使用 JS 的 replace 函数插入一段文本，您必须选择该文本以使其出现在真实服务器响应中的概率为零。然后使用JS的split函数在每次插入的文本出现时进行分割。

const inp='<p style={{marginTop:40px}}>ABC</P><p style={{marginTop:40px}}>ABC</P><p style={{marginTop:40px}}>ABC</P>'

const arr=inp.replace(/<\/P><p/g,"<\/P>###SLICE-HERE###<p").split("###SLICE-HERE###")

console.log(arr)

您可能还想处理 和

的不同情况

[pP] 表示“小写 p 或大写 P”。

const inp='<p style={{marginTop:40px}}>ABC</P><p style={{marginTop:40px}}>ABC</P><p style={{marginTop:40px}}>ABC</P>'

const arr=inp.replace(/<\/[pP]><[pP]/g,"<\/p>###SLICE-HERE###<p").split("###SLICE-HERE###")

console.log(arr)

如果服务器可以在段落之间发送空格或换行符？

\s 代表任何空白字符。 * 表示 0 个或多个。

const inp='<p style={{marginTop:40px}}>ABC</P><p style={{marginTop:40px}}>ABC</P>   <p style={{marginTop:40px}}>ABC</P>'

const arr=inp.replace(/<\/[pP]>(\s)*<[pP]/g,"<\/p>###SLICE-HERE###<p").split("###SLICE-HERE###")

console.log(arr)

仍然不完美，因为正则表达式永远无法完全解析 HTML

上面的代码示例仅适用于大量但不完整的情况。例如，如果服务器发送包含引用的</P><P> 的文本行，即为了在屏幕上显示该文本，我提供的脚本会将其误认为是段落的结尾。

我相信，单独使用正则表达式来处理所有可能的 HTML 序列的一般情况是不可能的，并且无法按段落正确拆分它们。

但是，如果服务器在您的控制之下，或者以其他方式合理地可能只发送行为良好的文本，并且您的目的不是关键任务，那么您可以按照您的描述做出合理的努力。