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?
Thank you very much for your help.
You can use exec instead of split to obtain the separated elements:
The reason you get empty elements is the same why you get
<img...>
inyour results. When you use capturing parentheses in asplit
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 getundefined
instead of empty strings. However, you can easilyfilter
those out: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 inIf you don't want that, the filter function becomes even simpler: