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而不是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);

拆分字符串并保留分隔符

2 个答案: