dom-parser
dom-parser copied to clipboard
Tag regex issue
The tag regex is incorrectly parsing use tags in svg
const tagRegExp = /(<\/?[a-z][a-z0-9]*(?::[a-z][a-z0-9]*)?\s*(?:\s+[a-z0-9-_]+=(?:(?:'[\s\S]*?')|(?:"[\s\S]*?")))*\s*\/?>)|([^<]|<(?![a-z\/]))*/gi
const html = `<mask id="mask">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#clip1"></use>
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#clip2"></use>
</mask>`
const tags = html.match(tagRegExp)
console.log(tags)
// Outputs [
// '<mask id="mask">',
// '\n ',
// '',
// 'use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#clip1">',
// '</use>',
// '\n ',
// '',
// 'use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#clip2">',
// '</use>',
// '\n',
// '</mask>',
// ''
// ]
Notice the missing opening brackets (<) in parsed use tag