Fe-interview: [js] 第213天 写一个方法检测页面中的所有标签是否正确闭合

[haizhilin2013]

第213天 写一个方法检测页面中的所有标签是否正确闭合

我也要出题

[cxwht]

这个类似力扣第20题：
`var isValid = function(s) {
let valid = true;
const stack = [];
const mapper = {
'{': "}",
"[": "]",
"(": ")"
}

for(let i in s) {
    const v = s[i];
    if (['(', '[', '{'].indexOf(v) > -1) {
        stack.push(v);
    } else {
        const peak = stack.pop();
        if (v !== mapper[peak]) {
            return false;
        }
    }
}

if (stack.length > 0) return false;

return valid;

};`
里面的标签改一改，其实就差不多了

[wheatup]

可以使用template对该HTML进行编译，然后对比两者是否一致，如果不一致表示有未闭合的标签/不符合规范的语法，被编译器自动修正了。

const areAllTagsClosed = html => {
    const template = document.createElement('template');
    template.innerHTML = html;
    return template.innerHTML === html;
}

areAllTagsClosed(`<div><span></div>`);  // false
areAllTagsClosed(`<div><br></div>`);    // true

template 内的html编译后在未挂载dom前不会触发事件以及javascript，可以在其挂载dom之前对其进行消毒处理，该手段也是防XSS的主要方法之一。

[Ryuurock]

这道题就是考栈思维嘛，给一个数组，遇到起始标签入栈，遇到结束标签出栈，若最后无法得到一个空栈，说明有未闭合的标签，自闭合的除外

[zeroone001]

(function () {
let dom_str = document.querySelector('body').outerHTML;
let stack = [];
for (let i in dom_str) {
    const v = dom_str[i];
    if (v === '<') {
        stack.push(v);
    } else if (v === '>') {
        let peak = stack.pop();
        if (peak !== '<') return false;
    }
}
if (stack.length > 0) return false;
return true;
})();