JS拆分方法，包含數組中的分隔符

Question

我想拆分一組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> 

Answer 1

split（）方法也需要正則表達式來分割字符串。在你的情況使用正則表達式\ s（？= \ <）。

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

正則表達式explantion

• \ S - 任何空格字符
• （= \ <？） - 其次是<字符（提前正面看）

Answer 2

您還可以使用正則表達式，放眼未來下一個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);

如果要分開，但保留分隔符，你可以使用capturing parenthesis。

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);

這就是說，你真的應該不做字符串操作，或regular expression parsing，對，你知道是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)