' 或 ''

var startTag = /^\s]+))?)*)\s*(\/?)>/

//匹配 tag 的结尾, 例如'

var block = makeMap("a,address,article,applet,aside,audio,blockquote,button,canvas,center,dd,del,dir,div,dl,dt,fieldset,figcaption,figure,footer,form,frameset,h1,h2,h3,h4,h5,h6,header,hgroup,hr,iframe,ins,isindex,li,map,menu,noframes,noscript,object,ol,output,p,pre,section,script,table,tbody,td,tfoot,th,thead,tr,ul,video");

// Inline Elements - HTML 5

var inline = makeMap("abbr,acronym,applet,b,basefont,bdo,big,br,button,cite,code,del,dfn,em,font,i,iframe,img,input,ins,kbd,label,map,object,q,s,samp,script,select,small,span,strike,strong,sub,sup,textarea,tt,u,var");

// Elements that you can, intentionally, leave open

// (and which close themselves)

var closeSelf = makeMap("colgroup,dd,dt,li,options,p,td,tfoot,th,thead,tr");

// Attributes that have their values filled in disabled="disabled"

var fillAttrs = makeMap("checked,compact,declare,defer,disabled,ismap,multiple,nohref,noresize,noshade,nowrap,readonly,selected");

// Special Elements (can contain anything)

var special = makeMap("script,style");

//makeMap是为了方便取 key-value 对. 实际上数组的 indexOf 也不慢

function makeMap(str) {

var obj = {}, items = str.split(",");

for (var i = 0; i < items.length; i++)

obj[items[i]] = true;

return obj;

}

2.2 函数体

var HTMLParser = this.HTMLParser = function (html, handler) {

var index, chars, match, stack = [], last = html;

stack.last = function () {

return this[this.length - 1];

};

while (html) {

chars = true;

// Make sure we're not in a script or style element

if (!stack.last() || !special[stack.last()]) {

// Comment

if (html.indexOf("");

if (index >= 0) {

if (handler.comment)

handler.comment(html.substring(4, index));

html = html.substring(index + 3);

chars = false;

}

// end tag

} else if (html.indexOf("") == 0) {

match = html.match(endTag);

if (match) {

html = html.substring(match[0].length);

match[0].replace(endTag, parseEndTag);

chars = false;

}

// start tag

} else if (html.indexOf("

match = html.match(startTag);

if (match) {

html = html.substring(match[0].length);

match[0].replace(startTag, parseStartTag);

chars = false;

}

}

if (chars) {

index = html.indexOf("

var text = index < 0 ? html : html.substring(0, index);

html = index < 0 ? "" : html.substring(index);

if (handler.chars)

handler.chars(text);

}

} else {

html = html.replace(new RegExp("([\\s\\S]*?)]*>"), function (all, text) {

text = text.replace(/|/g, "$1$2");

if (handler.chars)

handler.chars(text);

return "";

});

parseEndTag("", stack.last());

}

if (html == last)

throw "Parse Error: " + html;

last = html;

}

// Clean up any remaining tags

parseEndTag();

function parseStartTag(tag, tagName, rest, unary) {

tagName = tagName.toLowerCase();

if (block[tagName]) {

while (stack.last() && inline[stack.last()]) {

parseEndTag("", stack.last());

}

}

if (closeSelf[tagName] && stack.last() == tagName) {

parseEndTag("", tagName);

}

unary = empty[tagName] || !!unary;

if (!unary)

stack.push(tagName);

if (handler.start) {

var attrs = [];

rest.replace(attr, function (match, name) {

var value = arguments[2] ? arguments[2] :

arguments[3] ? arguments[3] :

arguments[4] ? arguments[4] :

fillAttrs[name] ? name : "";

attrs.push({

name: name,

value: value,

escaped: value.replace(/(^|[^\\])"/g, '$1\\\"') //"

});

});

if (handler.start)

handler.start(tagName, attrs, unary);

}

}

function parseEndTag(tag, tagName) {

// If no tag name is provided, clean shop

if (!tagName)

var pos = 0;

// Find the closest opened tag of the same type

else

for (var pos = stack.length - 1; pos >= 0; pos--)

if (stack[pos] == tagName)

break;

if (pos >= 0) {

// Close all the open elements, up the stack

for (var i = stack.length - 1; i >= pos; i--)

if (handler.end)

handler.end(stack[i]);

// Remove the open elements from the stack

stack.length = pos;

}

}

};

2.3 查看函数执行结果

可用如下代码进行测试钩子函数的返回值. ps, 原生的 HTMLParser 是不能识别 vue 的@符号的, 简单修改attr和starTag的正则表达式即可

window.HTMLParser(document.querySelector('#app').outerHTML,(function(){

var obj = {};

['start','end','comment','chars'].forEach(x=>{

obj[x] = function (...args){

console.log(x,args)

}

})

return obj

})())

浏览器输出结果

3. 使用 HTMLParser 来构建目标数据结构

3.1 以构建 XML 为例来展示 options 配置

function HTMLtoXML(html) {

var results = "";

HTMLParser(html, {

start: function (tag, attrs, unary) {

results += "

for (var i = 0; i < attrs.length; i++)

results += " " + attrs[i].name + '="' + attrs[i].escaped + '"';

results += ">";

},

end: tag => results += "" + tag + ">",

chars: text => results += text,

comment: text => results += ""

});

return results;

}

HTMLtoXML测试结果

3.2 使用 HTMLParser 构建 AST

最简单的版本, 不考虑标签不闭合带来的错误, 同时保留空白节点

function HTMLtoAST(html){

var root = null

var stack = []

HTMLParser(html,{

start(tag,attrs,unary){

var element = { tag, attrs, children:[], type:1 }

if(!root){

root = element

}

if(stack.length){

var currentParent = stack[stack.length-1]

currentParent.children.push(element)

element.parent = currentParent

}

if(!unary){

stack.push(element)

}

},

end(){

stack.pop()

},

chars(text){

var currentParent = stack[stack.length - 1]

currentParent.children.push({ type: 2, text })

}

})

return root

}

如果要考虑不闭合标签的错误恢复, 例如

=>

实际上, 这件事已经在前面的160行的 HTMLParser 的parseStartTag函数中处理过了.

也可以参考 vue 的parseStartTag和parseEndTag函数

function handleStartTag (match) {

const tagName = match.tagName

const unarySlash = match.unarySlash

if (expectHTML) {

if (lastTag === 'p' && isNonPhrasingTag(tagName)) {

parseEndTag(lastTag)

}

if (canBeLeftOpenTag(tagName) && lastTag === tagName) {

parseEndTag(tagName)

}

}

//...

}

关于什么是 isNonPhrasingTag , 即不允许藏在