判断html标签是否正确闭合

函数用途

用于检测输入的代码是否存在未闭合、错误嵌套等错误

实现原理

将输入html中标签分类两类:无内容元素和有内容元素

无内容元素:

img、br、hr等

将此类标签检查后过滤

有内容元素:

div、span、p等

遍历所有此类标签,判断该字符串是否正确闭合即可

举例:

<div></div> //true
<div></div //false
<div> //false
<div><div></div> //false

代码实现

function re(data) {
    let tag = ['a', 'abbr', 'address', 'area', 'article', 'aside', 'audio', 'b', 'base', 'bdi', 'bdo', 'blockquote', 'body', 'button', 'canvas', 'caption', 'cite', 'code','col', 'colgroup', 'datalist', 'dd', 'del', 'dfn', 'dialog', 'div', 'dl', 'dt', 'em', 'fieldset', 'figcaption', 'figure', 'footer', 'form', 'frame','head', 'header', 'hgroup', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'i', 'iframe', 'ins', 'label', 'legend', 'li', 'map', 'mark', 'menu', 'meter', 'nav', 'noscript','object', 'ol', 'outgroup', 'option', 'output', 'p', 'pre', 'html', 'progress', 'q', 'rp', 'rt', 'ruby', 's', 'samp', 'script', 'section', 'select', 'small', 'span','strike', 'strong', 'style', 'sub', 'summary', 'sup', 'table', 'tbody', 'td', 'textarea', 'tfoot', 'th', 'thead', 'time', 'title', 'tr', 'u', 'ul', 'var', 'video', 'wbr']
    //清除标签中内容、换行符
    data = data.replace(/.*?(<.*>).*/g, '$1').replace(/[\r\n]/g, '').replace(/\s+.*?>/g, '>')
    //排除无内容元素
    data = data.replace(/<(img|br|hr|input|link|meta|area|base|col|command|embed|keygen|param|source|track|wbr).*?>/g, '')
    //清除非标签元素,替换标签为()的形式,例如:<div>替换为(、</div>替换为)
    data = data.replace(/>.*?</g, '><').replace(/<[^\/].*?>/g, '(').replace(/<\/.*?[^<]>/g, ')')
    //判断()是否为偶数
    if (data.length % 2 != 0) {
        return false
    }
    //循环删除()直至没有()或者为空
    while (data.length) {
        let temp = data
        let i = 0
        while (i < tag.length) {
            let key = '<' + tag[i] + '></' + tag[i] + '>'
            data = data.replace(new RegExp(key, 'g'), '')
            i++
        }
        if (data == temp) {
            return false
        }
    }
    return true
}
re("<div></div>")//true
re("<div>")//false
re("<br>")//true
re("</img url=''>")//false
re("<img url=''/>")//true
re("<img url=''>")//true