判断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
38. 报数 »