regex split with non-capturing groups

Question

I want to match for html tagnames (eg. div in < div > ), and then split the string at the position of the match.

 var str = '<div> div'; var regex = /(?:<)(\\w*)(?=>)?/g; var arr = str.split(regex); console.log(arr); //result: ["", "div", "> div"] //expected: ["<", "> div"] 

However, the "&lt ;" gets lost by doing this, and also I want the div inside of the < and > removed. How can I achieve it?

This one also doesn't work, because then the "fake-div" at the end of the string would also be splitted, even though it is not within < and >:

 var str = '<div> div'; var regex = /(?:<)(\\w*)(?=>)?/g; var match = regex.exec(str); var arr = match.input.split(match[1]); console.log(arr); //result: ["<", "> ", ""] //expected: ["<", "> div"] 

Answer 1

One of the closest you might get if you want to only use a single regex is:

var regex = /\b(?:\w+)(?=>)/gi;
'<div> div'.split(regex);//["<", "> div"]

It gives the expected behavior but the obvious problem with this one is that it does not check preceding < . And javascript does not natively support lookbehind.

A better approach might be to separate < and > and then combine them:

var str = '<div> div';
var ltRgx = /(?:\s|\b|^)(?=&lt)/gi;
var gtRgx = /\b(?:\w+)(?=>)/gi;
var result = str.split(ltRgx).map(function(d,i){
    return d.split(gtRgx)
}).reduce(function(ac,d){
    return ac.concat(d);
});
console.log(result);//["<", "> div"]
/*Another example*/
str = '<div> <img> div';
result = str.split(ltRgx).map(function(d,i){
    return d.split(gtRgx)
}).reduce(function(ac,d){
    return ac.concat(d);
});
console.log(result);//["<", ">", "<", "> div"]