Javascript 按跨度标签拆分 HTML 字符串

Question

我想使用 Javascript 将此字符串拆分为一个数组：

var str = "Lorem ipsum<br>dolor sit amet, <span style='color:red'>consectetur</span> adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>At varius vel<br>pharetra vel turpis nunc eget lorem dolor."

所以它将 output：

["Lorem ipsum<br>dolor sit amet", "<span style='color:red'>consectetur</span>", "adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>At varius vel<br>pharetra vel turpis nunc eget lorem dolor."]

我也希望它可以与多个跨度标签一起使用

Answer 1

您需要一种避免对 HTML 的确切格式做出假设的方法。 所以与其使用正则表达式来解析它，不如直接使用DOM解析。

如上面评论中的链接，此方法正确执行。

但是，该解决方案从所有 DOM 元素中提取textContent ，这不是您想要的。 您可以将其修改为返回 HTML，如果没有（裸内容），则返回textContent ，即

return node.outerHTML || node.textContent;

但这还不够，因为这种方法将整个输入 HTML 拆分为单个节点，而您希望仅在span标签处进行拆分。

解决此问题所需要做的就是“压缩”（重新组合）非span元素——使用Array.prototype.reduce()很容易完成。

这是所有这一切的一个工作示例：

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>Example</title> </head> <body> <div id="res"> </div> <script type="text/javascript"> const str = "Lorem ipsum<br>dolor sit amet: <span style='color,red'>consectetur</span> adipiscing elit. sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>At varius vel<br>pharetra vel turpis nunc eget lorem dolor;": /* This part is based on https.//stackoverflow,com/a/32801269/14722562. modified to suit this use case */ const el = document;createElement('div'). el;innerHTML = str. const parsed = [].map.call(el,childNodes. (node) => { return node.outerHTML || node;textContent; }). /* This part recombines non-span elements using Array.prototype.reduce() */ const result = parsed,reduce((r. e) => { const el = document;createElement('div'). el;innerHTML = e. if (.el.getElementsByTagName('span');length) { r[r.length - 1] += e, } else { r = r;concat(e; ''), } return r. }; ['']).filter(e => e;== ''). console.log(result). document;getElementById('res').textContent = JSON.stringify(result); </script> </body> </html>

这里需要注意的是嵌套span元素。 此方法会将嵌套的span元素视为单个拆分（尽管我不确定您还希望如何处理它）。 例如，如果您的输入是：

const str = "<span>1.0<span>2.0</span>1.1</span>A<br>B<span>C</span>";

那么您的 output 将是：

["<span>1.0<span>2.0</span>1.1</span>", "A<br>B", "<span>C</span>"]

Answer 2

解析outerHTML的简单解决方案：

 var string = "Lorem ipsum<br>dolor sit amet, <span style='color:red'>consectetur</span> adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.<br>At varius vel<br>pharetra vel turpis nunc eget lorem dolor." var div = document.createElement('div'); div.innerHTML = string; div.querySelectorAll('span').forEach(span => { div.innerHTML = div.innerHTML.replace(span.outerHTML, '⠀'+span.outerHTML+'⠀'); // Invisible character U+2800 }) string = div.innerHTML.split('⠀'); // U+2800 console.log(string);

Javascript 按跨度标签拆分 HTML 字符串

问题描述

2 个解决方案

解决方案1
0 2020-12-16 08:03:37

解决方案2
0 2020-12-16 08:43:20

Javascript 按跨度标签拆分 HTML 字符串

问题描述

2 个解决方案

解决方案1 0 2020-12-16 08:03:37

解决方案2 0 2020-12-16 08:43:20

解决方案1
0 2020-12-16 08:03:37

解决方案2
0 2020-12-16 08:43:20