拆分字符串並保留分隔符

Question

我正在編寫一個擴展名爲chrome的擴展名，並且我需要拆分僅包含text和img標籤的字符串，以便數組的每個元素都是letter或img標籤。例如，"a", "b", "c", "<img.../>", "d"。我找到了一種方法來做到這一點：str.split(/(<img.*?>|)/)，然而，結果數組的一些元素是空的（我不知道爲什麼）。還有其他合適的正則表達式嗎？

非常感謝您的幫助。

Answer 1

你得到空元素的原因是一樣的，你爲什麼得到<img...>你的結果。當您在split模式中使用捕獲圓括號時，結果將包含發現分隔符的地方的捕獲。既然你有(<img.*?>|)，如果使用第二個選擇，你匹配（並捕獲）一個空字符串。不幸的是，(<img.*?>)|本身並沒有幫助，因爲你仍然會得到undefined而不是空字符串。然而，你可以很容易地filter那些出：

str.split(/(<img[^>]*>)|/).filter(function(el) { return el !== undefined; }); 

這仍然將讓你在一開始空元素和字符串的結束以及相鄰<img>標記之間，雖然。因此分裂<img><img>會導致

["", "<img>", "", "<img>", ""] 

如果你不希望這樣，過濾器的功能變得更簡單：

str.split(/(<img[^>]*>)|/).filter(function(el) { return el; }); 

Answer 2

可以使用EXEC而不是分裂，以獲得分離的元素：

var str = 'abc<img src="jkhjhk" />d'; 
var myRe = /<img[^>]*>|[a-z]/gi; 
var match; 
var res= new Array(); 

while ((match = myRe.exec(str)) !== null) { 
    res.push(match[0]); 
} 
console.log(res);