求助对html字符串解析

下面是一段html字符串，我需要将其转换为json数据，结构如下:

var data = [
    {    
        src: '', img元素的src
        title: '', class为inner-title的内容
        status: '', class为other-p的内容
        price: '', class为bottom-p元素中的售价
        href: '' class为bottom-元素中的button onclick属性值
    },
    {    
        src: '', img元素的src
        title: '', class为inner-title的内容
        status: '', class为other-p的内容
        price: '', class为bottom-p元素中的售价
        href: '' class为bottom-元素中的button onclick属性值
    },
    ...
]

原先我可以将整段字符串用jquery的$包裹一下，然后使用jquery的选择器来很容易的获取，但是现在由于不可抗的原因，需要作为字符串来解析，所以想知道有没有相关的字符串库，或者哪位正则大佬帮忙解析一下？

        <div class="inner-sale">
            <ul>
                <li class="inner-li" >
                    <div>
                        <img src="http://img13.360buyimg.com/n0/jfs/t1/19531/26/3823/118504/5c2c35beE66ec977c/8133abedfda92680.jpg"/>
                    </div>
                    <div class="p-sale">
                        <p class="inner-title">Sleepace享睡RestOn智能睡眠监测仪器无感非穿戴睡眠监测设备 精准监测 高档健康礼品</p>
                        <p class="other-p">有货</p>
                        <p class="bottom-p">售价：￥<span>691.00</span><button onclick="location.href='/portal/jd/jdbuy1/1389030.do'">立即购买</button></p>
                    </div>
                </li>
                <li class="inner-li" >
                    <div>
                        <img src="http://img13.360buyimg.com/n0/jfs/t1231/108/881570840/22811/69098b6a/555581a7Nca895aa4.jpg"/>
                    </div>
                    <div class="p-sale">
                        <p class="inner-title">小米（MI）智能体重秤 家用健康秤 电子秤 精度高 APP数据测量 led灯显示</p>
                        <p class="other-p">有货</p>
                        <p class="bottom-p">售价：￥<span>112.00</span><button onclick="location.href='/portal/jd/jdbuy1/1545210.do'">立即购买</button></p>
                    </div>
                </li>
                <li class="inner-li" >
                    <div>
                        <img src="http://img13.360buyimg.com/n0/jfs/t16570/343/1904565415/75857/2b275e/5a791d76Nda1ca03e.jpg"/>
                    </div>
                    <div class="p-sale">
                        <p class="inner-title">京东叮咚(DingDong) A1人工智能音箱旗舰版 迷你蓝牙WIFI音响 AI家居控制 海量应用内容 玄夜黑</p>
                        <p class="other-p">没货</p>
                        <p class="bottom-p" >售价：￥<span>498.00</span><button style="background-color:#bfbfbf">立即购买</button></p>
                    </div>
                </li>
                <li class="inner-li" >
                    <div>
                        <img src="http://img13.360buyimg.com/n0/jfs/t2299/21/364641074/53555/214d0aef/56012bd0Nfb6122e9.jpg"/>
                    </div>
                    <div class="p-sale">
                        <p class="inner-title">小米（MI）智能手环1代 普通版 小米手环 防水腕带 睡眠识别 睡眠质量监测 长续航 计步器 白色LED指示灯</p>
                        <p class="other-p">有货</p>
                        <p class="bottom-p">售价：￥<span>59.00</span><button onclick="location.href='/portal/jd/jdbuy1/1869211.do'">立即购买</button></p>
                    </div>
                </li>
                <li class="inner-li" >
                    <div>
                        <img src="http://img13.360buyimg.com/n0/jfs/t10408/344/2717747951/89487/46212532/59fc19f5Nf88f816d.jpg"/>
                    </div>
                    <div class="p-sale">
                        <p class="inner-title">暴风魔镜 小D 虚拟现实智能VR眼镜3D头盔 白色</p>
                        <p class="other-p">没货</p>
                        <p class="bottom-p" >售价：￥<span>27.00</span><button style="background-color:#bfbfbf">立即购买</button></p>
                    </div>
                </li>
                <li class="inner-li" >
                    <div>
                        <img src="http://img13.360buyimg.com/n0/jfs/t4054/180/1026804274/168698/ede5f02/5865e273Nd35ac4fb.jpg"/>
                    </div>
                    <div class="p-sale">
                        <p class="inner-title">锐玛（EIRMAI） R10 单反相机干燥箱 防潮箱 密封镜头电子箱  中号 送大号吸湿卡 炫蓝色</p>
                        <p class="other-p">有货</p>
                        <p class="bottom-p">售价：￥<span>95.00</span><button onclick="location.href='/portal/jd/jdbuy1/967737.do'">立即购买</button></p>
                    </div>
                </li>
            </ul>
        </div>

正则表达式 javascript

阅读 3.5k

2 个回答

热饭班长

✓ 已被采纳

用蛮力解析出来了，先应付着

const str = `
 <div class="inner-sale">
    <ul>
      <li class="inner-li" >
            <div>
                <img src="http://img13.360buyimg.com/n0/jfs/t1/19531/26/3823/118504/5c2c35beE66ec977c/8133abedfda92680.jpg"/>
            </div>
            <div class="p-sale">
                <p class="inner-title">Sleepace享睡RestOn智能睡眠监测仪器无感非穿戴睡眠监测设备 精准监测 高档健康礼品</p>
                <p class="other-p">有货</p>
                <p class="bottom-p">售价：￥<span>691.00</span><button onclick="location.href='/portal/jd/jdbuy1/1389030.do'">立即购买</button></p>
            </div>
        </li>
        <li class="inner-li" >
            <div>
                <img src="http://img13.360buyimg.com/n0/jfs/t1231/108/881570840/22811/69098b6a/555581a7Nca895aa4.jpg"/>
            </div>
            <div class="p-sale">
                <p class="inner-title">小米（MI）智能体重秤 家用健康秤 电子秤 精度高 APP数据测量 led灯显示</p>
                <p class="other-p">有货</p>
                <p class="bottom-p">售价：￥<span>112.00</span><button onclick="location.href='/portal/jd/jdbuy1/1545210.do'">立即购买</button></p>
            </div>
        </li>
        <li class="inner-li" >
            <div>
                <img src="http://img13.360buyimg.com/n0/jfs/t16570/343/1904565415/75857/2b275e/5a791d76Nda1ca03e.jpg"/>
            </div>
            <div class="p-sale">
                <p class="inner-title">京东叮咚(DingDong) A1人工智能音箱旗舰版 迷你蓝牙WIFI音响 AI家居控制 海量应用内容 玄夜黑</p>
                <p class="other-p">没货</p>
                <p class="bottom-p" >售价：￥<span>498.00</span><button style="background-color:#bfbfbf">立即购买</button></p>
            </div>
        </li>
        <li class="inner-li" >
            <div>
                <img src="http://img13.360buyimg.com/n0/jfs/t2299/21/364641074/53555/214d0aef/56012bd0Nfb6122e9.jpg"/>
            </div>
            <div class="p-sale">
                <p class="inner-title">小米（MI）智能手环1代 普通版 小米手环 防水腕带 睡眠识别 睡眠质量监测 长续航 计步器 白色LED指示灯</p>
                <p class="other-p">有货</p>
                <p class="bottom-p">售价：￥<span>59.00</span><button onclick="location.href='/portal/jd/jdbuy1/1869211.do'">立即购买</button></p>
            </div>
        </li>
        <li class="inner-li" >
            <div>
                <img src="http://img13.360buyimg.com/n0/jfs/t10408/344/2717747951/89487/46212532/59fc19f5Nf88f816d.jpg"/>
            </div>
            <div class="p-sale">
                <p class="inner-title">暴风魔镜 小D 虚拟现实智能VR眼镜3D头盔 白色</p>
                <p class="other-p">没货</p>
                <p class="bottom-p" >售价：￥<span>27.00</span><button style="background-color:#bfbfbf">立即购买</button></p>
            </div>
        </li>
        <li class="inner-li" >
            <div>
                <img src="http://img13.360buyimg.com/n0/jfs/t4054/180/1026804274/168698/ede5f02/5865e273Nd35ac4fb.jpg"/>
            </div>
            <div class="p-sale">
                <p class="inner-title">锐玛（EIRMAI） R10 单反相机干燥箱 防潮箱 密封镜头电子箱  中号 送大号吸湿卡 炫蓝色</p>
                <p class="other-p">有货</p>
                <p class="bottom-p">售价：￥<span>95.00</span><button onclick="location.href='/portal/jd/jdbuy1/967737.do'">立即购买</button></p>
            </div>
        </li>
    </ul>
</div>
`

function getAttr(str, pattern) {
  var result = ''
  str.replace(pattern, function(_str, $1) {
    result = $1
  })
  return result
}

这里要注意字符串里面很可能存在换行和回车
\n是回车 \r是换行

str.replace(/<li(\r|\n|.)+?li>/g, function(str) {
  var src = getAttr(str, /<img.src="(.+)"\/>/g)
  var title = getAttr(str, /<p.+class="inner-title">(.+)<\/p>/g)
  var status = getAttr(str, /<p.+class="other-p">(.+)<\/p>/g)
  var price = getAttr(str, /<span>(.+)<\/span>/g)
  var href = getAttr(str, /onclick="(.+)">/g)

  console.log(src)
  console.log(title)
  console.log(status)
  console.log(price)
  console.log(href)
})