一个关于正则表达式的问题

Question

假如一个字符串，里面夹杂了几个图片：

const str = '你好哈哈哈哈<img src="https://pic13.com/img111.gif">这里也有文字<img src="https://pic13.com/img222.gif">这里可能也有文字<img src="https://pic13.com/img333.gif">'

然后有一个对象数组：

const arr = [
    {name: 'a', 'url': 'https://pic13.com/img111.gif'},
    {name: 'b', 'url': 'https://pic13.com/img222.gif'},
    {name: 'c', 'url': 'https://pic13.com/img333.gif'}
]

如何使用正则把字符串str里面对应的图片筛选出来，替换成arr数组里面对应的name？
ps: 需要把整个<img>标签替换掉

理想结果：

newStr = '你好哈哈哈哈a这里也有文字b这里可能也有文字c'

Answer 1

非贪婪匹配

<.*?>

每次只替换一次

问题是不知道怎么判断没有匹配

目前适用查找 "<img" 存不存在来判断是否替换结束

Answer 2

// name 取得图片名称  你可以自己定规则 
function replaceImg(str) {
  let imgReg = /<img.*?(?:>|\/>)/g
  let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/
  let nameReg = /(\w+)\.(?:gif|jpeg|jpg|png)/
  let arr = []
  str = str.replace(imgReg, img => {
    let src = (img.match(srcReg) || [undefined])[0]
    let name = (src.match(nameReg) || [undefined, undefined])[1]
    arr.push({ name, src })
    return name
  })

  return {
    arr,
    str
  }
}

res = replaceImg(str)
console.log(res)

/*
{ arr:[ 
     { name: 'img111', src: 'src="https://pic13.com/img111.gif"' },
     { name: 'img222', src: 'src="https://pic13.com/img222.gif"' },
     { name: 'img333', src: 'src="https://pic13.com/img333.gif"' } ],
  str: '你好哈哈哈哈img111这里也有文字img222这里可能也有文字img333'
}
*/

Answer 3

添加了不存在的情况，保留了 <img src="https://pic13.com/img444.gif">

const str = '你好哈哈哈哈<img src="https://pic13.com/img111.gif">这里也有文字<img src="https://pic13.com/img222.gif">这里可能也有文字<img src="https://pic13.com/img333.gif"><img src="https://pic13.com/img444.gif">'

console.log(demo(str)) // => 你好哈哈哈哈a这里也有文字b这里可能也有文字c<img src="https://pic13.com/img444.gif">

function demo (data) {
  let url, findOne, arr = [
    {name: 'a', 'url': 'https://pic13.com/img111.gif'},
    {name: 'b', 'url': 'https://pic13.com/img222.gif'},
    {name: 'c', 'url': 'https://pic13.com/img333.gif'}
  ]
  
  return String(data).replace(/<img.*?>/g, item => {
    let res = item
    item.replace(/(src='|")(.*?(?='|"( |>)))/g, (c, $1, url) => {
      findOne = arr.find(a => a.url===url)
      if(findOne) {
        res = findOne.name
      }
    })
    return res
  })
}

Answer 4

let a = '你好哈<img src="https://pic13.com/img111.gif">这里也有文字<img src="https://pic13.com/img222.gif">这里可能也有文字<imgsrc="https://pic13.com/img333.gif">'
let arr = [
  { name: 'a', 'url': 'https://pic13.com/img111.gif' },
  { name: 'b', 'url': 'https://pic13.com/img222.gif' },
  { name: 'c', 'url': 'https://pic13.com/img333.gif' }
]

function imageChange(e, arr) { 
  let index = 0
  let newimg = e.replace(
    /<img[^>]*src=['"]([^'"]+)[^>]*>/gi,
    function (match, capture) {
      index++
      return match.replace(match, arr[index - 1].name)
    }
  ); 
  return newimg
}
imageChange(a,arr)

Answer 5

这样会不会更简单 不存在img标签不规则吧 不规则就只能用正则了

let str =
'你好哈哈哈哈<img src="https://pic13.com/img111.gif&...;>这里也有文字<img src="https://pic13.com/img222.gif&...;>这里可能也有文字<img src="https://pic13.com/img333.gif&...;>';

const arr = [
{ name: 'a', url: 'https://pic13.com/img111.gif' },
{ name: 'b', url: 'https://pic13.com/img222.gif' },
{ name: 'c', url: 'https://pic13.com/img333.gif' }
];

const replaceImgTag = () => {
for (let i = 0, len = arr.length; i < len; i++) {

let splitStr = `<img src="${arr[i].url}">`;
str = str.split(splitStr).join(arr[i].name);

}
};

Answer 6

const regex=/<img\b[^>]*\bsrc="([^"]+)"[^>]*>/ig;
const str = '你好哈哈哈哈<img src="https://pic13.com/img111.gif">这里也有文字<img src="https://pic13.com/img222.gif">这里可能也有文字<img src="https://pic13.com/img333.gif">';
const arr = [
    {name: 'a', 'url': 'https://pic13.com/img111.gif'},
    {name: 'b', 'url': 'https://pic13.com/img222.gif'},
    {name: 'c', 'url': 'https://pic13.com/img333.gif'}
];
const urlsMap=new Map();
arr.forEach(function(item,index){
    urlsMap.set(item.url,item.name);
});
const result=str.replace(regex,function(m,g1){
    return urlsMap.has(g1)?urlsMap.get(g1):m;
});