html 属性 js,js解析html属性列表

因为项目的一个小组件里面需要对类似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;

}

思路非常简单，就是遍历整个字符串，遇到特殊标记就记录下来，再遇到特殊标记就结束一个属性的查找，最后得到一个数组。