JS拆分方法，在数组中包含分隔符

JS split method, include separator in array

本文关键字：包含 分隔符 数组 拆分 方法 JS      更新时间：2023-09-26

我想拆分一组div元素，以便在数组中进行进一步的文本处理。一个简单的模型：

var divElements = prompt('Input');
array = divElements.split('</div>')
console.log(array);

输入：

<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>

目前输出：

array
["<div id="1">", "
<div id="2">", "
<div id="3">", "
<div id="4">", ""]

但我想在数组中包含分隔符（div 结束标签）以保持 html 语法完整。因此，数组应具有以下四个项目：

<div id="1"></div>
<div id="2"></div>
<div id="3"></div>
<div id="4"></div>

您还可以使用正则表达式来展望下一个div。

var str = '<div id="1"></div><div id="2"></div><div id="3"></div><div id="4"></div>';
var arr = str.split(/(?=<div)/);
console.log(arr);

如果要分隔但保留分隔符，可以使用捕获括号。

var str = '<div id="1"></div><div id="2"></div><div id="3"></div><div id="4"></div>';
var arr = str.split(/(<'/div>)/);
console.log(arr);

也就是说，您确实不应该对已知是 HTML 的数据执行字符串操作或正则表达式解析。属性可能包含类似 HTML 的模式，然后你就不走运了。

将其放入容器元素中，并以这种方式处理它，或者使用适当的解析器。

var data = '<div id="1"></div><div id="2"></div><div id="3"></div><div id="4"></div>';
var ele = document.createElement('div');
ele.innerHTML = data;
console.log(ele.childNodes)

split

（） 方法也采用正则表达式来拆分字符串。在您的情况下，请使用正则表达式 ''s（？=''<）。

    var divElements = prompt('Input');
    array = divElements.split(/'s(?='<)/);
    console.log(array);

正则表达式

  • ''s - 任何空格字符
  • （？=''<） - 后跟<字符（积极展望未来）>
相关文章：