时间戳

首页 > 解决方案 > 仅获取具有相对路径的图像 | 正则表达式

javascript - 仅获取具有相对路径的图像 | 正则表达式

问题描述

我正在尝试('/folder/image.jpg', 'someimage.png')从字符串中提取具有相对路径但不是绝对路径(https://www.example.com/abc.jpg)的图像，然后将所有图像推送到某个数组中。

当前数组： ["123.png", "abc.jpg", "xyz.jpg", "http://example.com/abc.jpg", "https://example.com/xyz.jpg", "popcorn.png"]

预期数组： ["123.png", "abc.jpg", "xyz.jpg", "popcorn.png"]

测试：https ://codepen.io/Ashish9342/pen/qLwWYz?editors=0011

var content = 'Lorem ipsum dolor sit amet, consectetur <img style="height:10px" src="123.png"/> adipiscing elit. Praesent sed orci vitae nulla ultricies vehicula. Donec ex arcu, ultricies at nisl et, convallis lobortis nisl. Pellentesque aliquet luctus mollis. <img src="abc.jpg"/> Ut vehicula, lectus et iaculis molestie, est purus dignissim magna, sit amet tincidunt quam ante varius neque. Pellentesque quis ligula <img class="fantom" src="xyz.jpg"/> in risus efficitur ullamcorper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis porta, eros at sollicitudin viverra, nisl lectus dapibus erat, id rutrum augue augue sed lectus. <img src="http://example.com/abc.jpg"/> Nullam felis augue, placerat vel mattis et, viverra sit amet elit. Cras pulvinar iaculis massa, sed consectetur <img src="https://example.com/xyz.jpg"/> ligula luctus non. Donec vel augue mattis tellus rutrum ultricies et suscipit  <img src="popcorn.png" alt="pop corn"/> erat.'

function getRelativePathImages(content) {
  if (content && content.search('<img')) {
    const urls = [];
    let m;
    const rex = /<img[^>]+src="([^">]+)/g;
    // const rex = /<img[^>]+src="([^http">]+)/g;

    while (m = rex.exec(content)) {
      if (urls.indexOf(m[1]) < 0) {
        urls.push(m[1]);
      }
    }
    console.log(urls);
  }
}

getRelativePathImages(content);

标签： javascriptregex

解决方案

只需在您的正则表达式中进行此负前瞻，(?!http)之后src="将拒绝任何以开头的网址http并将您的正则表达式更改为

/<img[^>]+src="(?!http)([^">]+)/g


var content = 'Lorem ipsum dolor sit amet, consectetur <img style="height:10px" src="123.png"/> adipiscing elit. Praesent sed orci vitae nulla ultricies vehicula. Donec ex arcu, ultricies at nisl et, convallis lobortis nisl. Pellentesque aliquet luctus mollis. <img src="abc.jpg"/> Ut vehicula, lectus et iaculis molestie, est purus dignissim magna, sit amet tincidunt quam ante varius neque. Pellentesque quis ligula <img class="fantom" src="xyz.jpg"/> in risus efficitur ullamcorper. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Duis porta, eros at sollicitudin viverra, nisl lectus dapibus erat, id rutrum augue augue sed lectus. <img src="http://example.com/abc.jpg"/> Nullam felis augue, placerat vel mattis et, viverra sit amet elit. Cras pulvinar iaculis massa, sed consectetur <img src="https://example.com/xyz.jpg"/> ligula luctus non. Donec vel augue mattis tellus rutrum ultricies et suscipit  <img src="popcorn.png" alt="pop corn"/> erat.'

function getRelativePathImages(content) {
  if (content && content.search('<img')) {
    const urls = [];
    let m;
    const rex = /<img[^>]+src="(?!http)([^">]+)/g;
    // const rex = /<img[^>]+src="([^http">]+)/g;

    while (m = rex.exec(content)) {
      if (urls.indexOf(m[1]) < 0) {
        urls.push(m[1]);
      }
    }
    console.log(urls);
  }
}

getRelativePathImages(content);

推荐阅读