同类名DOM嵌套抽离 2018-11-28 20:08:03

今天要处理一个html同类名嵌套的问题,具体结构如下

<!-- 有问题结构 -->
<span class="math">
  <span class="math">
    <span class="math">
      latex
    </span>
  </span>
</span>
<!-- 正确结构 -->
<span class="math">latex2</span>

这里需要将有问题的结构统一转换成正确的结构,但是不知道它究竟会嵌套几级。

一开始考虑递归,先查找到所有的math类,如果children不为0,就一直查找,直到拿到innerText

但这样有个问题就是,一级root会执行一次,二级root也会执行一次,三级继续,层级多的话一层一层下去都会走一遍,导致结果并不符合预期。

然后关键点就在于:一级root递归查找的过程中设置count计数器,在查找完毕之后加上count值,即跳过所有自己的子级,代码如下:

const str = `
<span class="math">
  <span class="math">
    <span class="math">
      latex
    </span>
  </span>
</span>
<span class="math">latex2</span>
`

function parse (str) {
  function _filter (dom, count) {
    count++
    let child = dom.children
    if (child.length === 1) {
      return filter(child[0], count)
    } else {
      return {
        html: dom.innerHTML,
        count
      }
    }
  }
  let doc = document.implementation.createHTMLDocument()
  doc.write(str)
  let maths = doc.querySelectorAll('.math')
  for (let index = 0; index < maths.length; index++) {
    const element = maths[index]
    if (element.children.length) {
      let result = _filter(element.children[0], 0)
      element.innerHTML = result.html
      index += result.count
    }
  }
  return doc.body.innerHTML
}

parse(str)

写递归一定要return

写递归一定要return

写递归一定要return

总是在这上边吃亏,嗨呀。