webpack 开发自定义插件对文本进行h标签和无序列表的方法描述

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第16天，点击查看活动详情

我们继续webpack 开发自定义插件前期一些可用数据推断和部分方法说明 中未完成工作，继续组装我们可使用的数据对象，我们这里还要解决一个问题，即使连续性的问题，我们需要和一个标签进行比较，如果是一样的，就放在一个数组里，这个也是保证.md文件的文本顺序和编译完的html顺序的一致性,下面我们来代码实现

_lastMark使上一个的标记也就是#、-这些 相等和不相等分别处理，这里只是处理的# 咱们也看一下 poll打印出来的数据

      if (reg_sharp.test(f[1])) {
        // 是真  我们就要在这里对其进行处理了 我们可以根据#号的个数来判断是标签是h1还是h2
       let input = f['input']
       //我们根据#号的个数就知道是h几了
       const tag = `h${f[1].length}`
       // 处理input的数据 我们想只拿正式文本 这里又用到正则了 正则换成空的
       const tagContent = input.replace(reg_mask,"")
       console.log(tag,tagContent)
       if (_lastMark==f[1]) { // 他是真的情况下是一组 
          poll[tag].tags = [...poll[tag].tags,`<${tag}>${tagContent}</${tag}>`]
       } else { // 反之则不是
        _lastMark = f[1]
        // 生成对象
        poll[tag] = {
            type: "single",
            tags: [`<${tag}>${tagContent}</${tag}>`]
        }
       }

     }

打印出来的数据确实和我们之前想的一样，后面我们处理 -和序号的 其实ul无序列表代码逻辑上面我们写的差不多，就是标签可能会略有区别，不是我们尽量不要把上面的方法单独抽离出来，因为我们需要给全局的一些变量添加数据，如果我们去单独抽离出来，会增加我们的维护和读写成本，vue2的源码的一些字符串处理方法，大部分也是没有剥离出来的，而且处理字符串的逻辑，分开写肯定是有不一样的

     // 判断无序列表 -
     if (reg_crossbar.test(f[1])) {
        console.log(f)
        let input = f['input'] // 保存数据
        const tagContent = input.replace(reg_crossbar,"")
        const tag = 'li'
        if (_lastMark==f[1]) { // 他是真的情况下是一组
            poll['ul'].tags = [...poll['ul'].tags,`<${tag}>${tagContent}</${tag}>`]
        } else {
            _lastMark = f[1]
            // 生成对象
            poll['ul'] = {
                type: "warper",
                tags: [`<${tag}>${tagContent}</${tag}>`]
            }
        }   
     }

这是判断无序列表的js 大体没变

我们来看下打印出来的poll

越来越接近，我们想要的数据了，后面继续解析有序列表尽情期待