javascript - 拆分字符串并保留分隔符

Question

我正在编写一个 chrome 扩展，我需要拆分一个只包含 text 和 img 标签的字符串，以便数组的每个元素都是字母或 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 而不是 split 来获取分隔的元素：

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