如何遍历html节点字符串取出对应的key的value?

Question

现有数据结构如下：

var Strings = "<span style='width:20px;height:20px;display:inline-block;margin-bottom:-5px;></span><span class='user-span' userId='26411b3a-91b1-4eee-bd16-c135e827b7ee'>用户9877</span><span class='msg-span'>1111</span>"

有如上字符串，写一个方法，传入一个key，取出key后面的值？
如：getValue('userId') = 26411b3a-91b1-4eee-bd16-c135e827b7ee

Answer 1

使用 DOMParser 。

function getValue (html, attr) {
  const parser = new DOMParser()
  const dom = parser.parseFromString(html, 'text/html')
  if (!dom) {
    return ''
  }
  const el = dom.querySelector(`[${attr}]`)
  if (!el) {
    return ''
  }
  return el.getAttribute(attr)
}

getValue(Strings, 'userId')

Answer 2

这段文本可以按照XML来解析，然后就可以获取属性啦。