探索解析HTMLDOM元素的秘密（一）

探索解析HTMLDOM元素的秘密

• 使用html创建DOM对象轻而易举，但是使用javascript创建DOM对象会稍微显得有些麻烦，如下：

const element = document.createElement("h1")
element.id = "h1"
element.innerHTML = "Hello World"
document.body.appendChild(element)

• 可以使用DOM提供的API创建DOM，但是会显得有些麻烦，有时候我会想可以不可以 自定义一种方法或者说一种函数 来通过 写html的方式 来创建 DOM
• 使用过 React 的朋友应该都知道有一个 jsx 就是专门用来创建 虚拟DOM 的，但是呢，我想 自已定义一个函数 来实现这么一个功能：只要你输入 html形式的DOM ，那么就会 生成一个真正的DOM，举个例子：加入你的输入是 字符串
  "< h1 id=‘title’ >Hello World< /h1 >",那么他就会 生成一个真正的h1标签

为了把问题简单化，可以先定义一个函数解析一个简单标签，就是只有开始结束标签和其相应的内容，像这样**"< h1 id=‘title’ >Hello World< /h1 >"**

• 以下就是解析这类型字符串并生成DOM的函数：

// 判断是字符转是不是符合 htmlDOM的写法，说白了就是判断是不是合法的标签
function isHTMLDOM(domstr){
    const reg1 = /^<[\w\W]*>[\w\W]*<\/[\w\W]*>$/g
    return Boolean(reg1.test(domstr)||reg1.test(domstr))
}
// 将 htmlDOM字符串 转换成一个对象
function HTMLDOMObj(domstr){
    const reg2 = /[<>]/g
    const domArr = domstr.split(reg2)
    const attrs = domArr[1].split(/\s+/g).slice(1)
    const dom = new Object()
    dom.head = domArr[1].split(/\s+/g)[0]
    dom.attrs = getAttrObj(attrs)
    dom.content = domArr[2]
    dom.tail = domArr[3].replace("/","")
    return dom
}
// 将 属性数组 转换成 属性对象
function getAttrObj(attrs){
    const o = new Object()
    for(let i=0,len=attrs.length;i<len;i++){
        const props = attrs[i].split("=")
        o[props[0]] = props[1].replace(/('|')/g,"")
    }
    return o
}
// 生成 htmlDOM
if(!document.toHTMLDOM){
    document.toHTMLDOM = function(domstr){
        if(isHTMLDOM(domstr)){
            const dom = HTMLDOMObj(domstr)
            const attrs = dom.attrs
            if(dom.head == dom.tail){
                const tag = dom.head
                const element = document.createElement(tag)
                for(let property in attrs){
                    element[property] = attrs[property]
                }
                element.innerHTML = dom.content
                document.body.appendChild(element)
                return element
            }else{
                throw new Error("the start tag is different form the end tag!")
            }
        }else{
            throw new Error("this is a illegal HTMLDOM!")
        }
    }
}

• 简单测试一下：

console.log(document.toHTMLDOM("<h1 id='title'>Hello World</h1>"))
console.log(document.toHTMLDOM("<h2 id='title' style='color:red'>Hello World</h2>"))

• 可以看见 成功解析了html并生成了htmlDOM元素
• 下节会提供更简单，更加全面的创建DOM函数