拆分字符串并保留分隔符

本文介绍了拆分字符串并保留分隔符的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

我正在编写一个chrome扩展，我需要拆分一个只包含text和img标签的字符串，这样数组的每个元素都可以是letter或img标签。例如，a，b，c，< img ... />，d。我找到了一种方法： str.split（/（< img。*？> |）/），但是，结果数组的一些元素是空的（我不知道为什么）。还有其他合适的正则表达式吗？

I'm writing a chrome extension, and I need to split a string that contains only text and img tags, so that every element of the array is either letter or img tag. For example, "a", "b", "c", "<img.../>", "d". I've found a way to do this: str.split(/(<img.*?>|)/), however, some elements of the resulting array are empty (I don't know why). Are there any other suitable regexes?

非常感谢你的帮助。

推荐答案

原因你获得空元素与你获得< img ...> inyour结果的原因相同。当您在拆分模式中使用捕获括号时，结果将包含找到分隔符的位置中的捕获。由于您有（< img。*？> |），如果使用第二个替代方法，则匹配（并捕获）空字符串。不幸的是，（< img。*？>）| 单独没有帮助，因为你仍然会得到 undefined 而不是空字符串。但是，您可以轻松地 filter 那些：

The reason you get empty elements is the same why you get <img...> inyour results. When you use capturing parentheses in a split pattern, the result will contain the captures in the places where the delimiters were found. Since you have (<img.*?>|), you match (and capture) an empty string if the second alternative is used. Unfortunately, (<img.*?>)| alone doesn't help, because you'll still get undefined instead of empty strings. However, you can easily filter those out:

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

这仍然会在字符串的开头和结尾以及相邻之间获得空元素但是，< img> 代码。因此，分割< img>< img> 会导致

This will still get you empty elements at the beginning and the end of the string as well as between adjacent <img> tags, though. So splitting <img><img> would result in

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

如果您不想这样，过滤器功能变得更加简单：

If you don't want that, the filter function becomes even simpler:

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