Анализ корневых элементов из файла фрагмент HTML


У меня есть следующий код, написанный на NodeJS, использование parse5 библиотека. Его цель состоит в том, чтобы разобрать корневого уровня в файл, содержащий HTML-фрагментов (файлы компонентов вю). Я хочу, чтобы внутреннее содержание этих корневых элементов остаются неизменными.

Я пытался несколько раз использовать cheerio/htmlparser2/parse5 для разбора файла, в виде HTML, но всегда с какой-то нежелательный побочный эффект на внутреннее содержание корневых элементов.

Наконец, я решил сделать попытку в какой-то нестандартной разбора (но не с нуля, потому что это было бы глупо, поэтому с помощью SAXParser в parse5. Сейчас он обрабатывает несколько сотен тестовых случаев, но, боюсь, есть много пограничных случаев, которые собираются, чтобы вернуться и укусить меня.

Кто-нибудь может увидеть какие-то подводные камни с этим кодом? Существует ли более простой способ достичь этого, что более надежными?

var parse5 = require("parse5")

const parse = module.exports = (str) => {
  const parser = new parse5.SAXParser({ locationInfo: true })
  const elements = []
  let current = null
  parser.on('startTag', (name, attrs, selfClosing, location) => {
    const tag = { name, attrs, openingTag: location, count: 0 }
    if(current){
      if(current.name === tag.name) current.count++
      return
    }
    current = tag
  })
  parser.on('endTag', (name, location)=>{
    const tag = { name, location }
    if(!current || current.name !== tag.name) return 
    if(current.count > 0) current.count--
    else{
      current.closingTag = tag.location
      elements.push(current)
      current = null
    }
  })
  parser.end(str)
  return elements.map((element)=>{
    delete element.count
    const attrs = {}
    element.attrs.forEach((attr)=>{
      attrs[attr.name] = attr.value !== '' ? attr.value : true
    })
    element.attrs = attrs
    element.content = str.substring(element.openingTag.endOffset, element.closingTag.startOffset)
    return element
  })
}

Вот пример (компонент вуе) HTML-файл:

<template>
  <div class="blurb">
    <h1>Hello World!</h1>
    <img :src="$foo('bar')" />
    <p v-if="showDescription">Lorem ipsum</p>
  </div>
</template>
<script>
module.exports = {
  el: '#blurb',
  data(){
    return {}
  },
  mounted(){

  },
  methods: {
    $foo(){
      return 'image.jpg'
    }
  }
}
</script>
<style lang="less">
.blurb{
  h1{
    color:blue;
  }
}
</style>


101
4
задан 7 марта 2018 в 10:03 Источник Поделиться
Комментарии