因为项目的一个小组件里面需要对类似html属性字符串进行解析,找了很久没有找到对应的库来做,干脆自己写一个。
function parseAttrs(source) { let separator = /\s/; let cursor = ''; let str = source.trim().replace(/\n+/g, ' ').replace(/\s+/g, ' '); let length = str.length; let attrs = []; let current = null; let type = 'key'; let reset = () => { current = { key: '', value: '' }; cursor = ''; }; reset(); for (let i = 0; i < length; i ++) { let char = str.charAt(i); let needPush = true; // 遇到引号 if (char === '"' || char === "'") { // 引号开始 if (!cursor) { cursor = char; type = 'value'; needPush = false; } // 引号结束 else if (cursor === char) { cursor = ''; type = 'key'; needPush = false; } } if (char === '=' && type === 'key') { needPush = false; } if (/[\w\W]/.test(char) && needPush) { current[type] += type === 'key' && char === ' ' ? '' : char; } // 遇到分隔符 if ((separator.test(char) && cursor === '') || i === length - 1) { attrs.push(current); reset(); } } return attrs; }
思路非常简单,就是遍历整个字符串,遇到特殊标记就记录下来,再遇到特殊标记就结束一个属性的查找,最后得到一个数组。