每日一问：将一个对象解析成html标签

Question

const obj = {
   type: 'text',
   name: 'username',
   class: 'user-name'
}

有没有好的间接的方法，将对象，解析成html
最后的结果是<input type='text' name='username' class="user-name" />

Answer 1

const obj = {
  type: 'text',
  name: 'username',
  class: 'user-name'
}
function generateHtml(obj) {
  let input = document.createElement("input")
  Object.keys(obj).forEach(el => {
    input.setAttribute(el, obj[el])
  })
  return input
}
generateHtml(obj)

Answer 2

如果不考虑转义

function toHtml(tagName, attrs, withEndTag) {
    const attrsString = Object.entries(attrs)
        .map(([key, value]) => `${key}="${value}"`)
        .join(" ");
    return withEndTag
        ? `<${tagName} ${attrsString}></${tagName}>`
        : `<${tagName} ${attrsString}/>`;
}

console.log(toHtml("input", obj));

如果要考虑转义，光是对 HTML 转义的处理就很累了，不如直接用 DOM 的办法来处理

function toHtml(tagName, attrs) {
    const el = document.createElement(tagName);
    Object.entries(attrs)
        .forEach(([key, value]) => el.setAttribute(key, value));
    return el.outerHTML;
}

console.log(toHtml("div", obj));