【study】正则表达式

1. 在线编译：c.runoob.com/front-end/8…

   const str = '<ul><li><p style=\"text-align: center;\">111<strong>222</strong><em><strong>333<del>444</del><u><del>555<span style=\"color: #fa541c\">666</span></del></u></strong></em></p></li></ul><ol><li><p style=\"text-align: right;\"><span style=\"color: #fa541c\">777<sup>8</sup></span>111<strong>2</strong></p><table class=\"ct-table\" data-bordercolor=\"#cccccc\"><tbody><tr><th data-colwidth=\"68\" width=\"68\"><p>111</p></th><th data-colwidth=\"68\" width=\"68\"><p>111</p></th><th data-colwidth=\"68\" width=\"68\"><p>11</p></th></tr><tr><td data-colwidth=\"68\" width=\"68\"><p>111</p></td><td data-colwidth=\"68\" width=\"68\"><p>11</p></td><td data-colwidth=\"68\" width=\"68\" class=\"overflow\"><p><span class=\"ct-image\" style=\"width: 500px\"><img alt=\"bug.png\" data-origin=\"\" data-small=\"\" data-src=\"http://msstest-corp.sankuai.com/v1/mss_156341e12eb248878e532dd820706c40/mall-fe-files/1655902891279.png\" data-width=\"500\" data-height=\"476\"></span>​</p></td></tr><tr><td data-colwidth=\"68\" width=\"68\"><p>2</p></td><td data-colwidth=\"68\" width=\"68\"><p>25</p></td><td data-colwidth=\"68\" width=\"68\"><p>5</p></td></tr><tr><td data-colwidth=\"68\" width=\"68\"><p>2</p></td><td data-colwidth=\"68\" width=\"68\"><p>8</p></td><td data-colwidth=\"68\" width=\"68\"><p>7</p></td></tr></tbody></table><p style=\"text-align: right;\"><strong>22</strong><em><strong>333<del>444</del><u><del>555<span style=\"color: rgb(250, 84, 28)\">666</span></del></u></strong></em></p></li></ol><p style=\"text-align: right;\"><span style=\"color: rgb(250, 84, 28)\">777<sup>8</sup></span></p><p style=\"text-align: right;\"><span class=\"ct-image\" style=\"width: 500px\"><img alt=\"bug.png\" data-origin=\"\" data-small=\"\" data-src=\"http://msstest-corp.sankuai.com/v1/mss_156341e12eb248878e532dd820706c40/mall-fe-files/1655902915875.png\" data-width=\"500\" data-height=\"476\"></span>​</p>"'
     
    // 1.提取出里面所有的img标签
    // 2.提取出里面所有的文字标签（即除img标签外）
    
    //1.
    const reg = /<img alt[^<^>]*>/g
    const res = str.match(reg)
    console.log(res)
    console.log(str.replace(reg, ''))

    // 2.
    // const reg = /<\s*img alt=.*?>/
    // const res = str.match(reg)
    // console.log(res)
    
    
    // 提取data-src里面的路径，多个放在数组里面，通过逗号隔开
    const reg = /data-src=".*?"/g
    const res = str.match(reg)
    console.log(res)
    const arr = res.map((i)=> {
      const a = /http:.*[^"]/g
      const b = i.match(a)
      return b
    })
    console.log(arr.flat(2))
    
    
    // 如何去掉.png后缀
    fileKey.substring(0, fileKey.lastIndexOf(".png"))
    

• 如何匹配.png结尾的

  const arr = [
      {
        fileKey: '06d80eb0c50b49a509b49f2424e8c805.1657508762948.png',
        fileType: 1,
        fileUrl: 'http://........06d80eb0c50b49a509b49f2424e8c805.1657508762948.png',
      },
      {
        fileKey: '0df1ea125f71a35cd64764a949cab403.1657508768719.mp4',
        fileType: 1,
        fileUrl: 'http://.......0df1ea125f71a35cd64764a949cab403.1657508768719.mp4',
      }
    ]

    // const res = /\.(png|jpg|gif)$/g


    const res = arr.map((i)=> {
      if (i.fileKey.match( /\.(png|jpg|gif|mp4)$/g)){
        return i;
      }
    }).filter((j) => j !== undefined)
 
    console.log(res);

• http和https都可被匹配到

https{0,1}