字符串中解析匹配Html标签问题

Question

需求： 需求是将字符串中一个img标签换成img标签的一个属性（name）
示例：

aaaaaaaaaaaa
<img name="U+1F608" src="../../static/images/emoji/1f608.png" style="width: 18px;height: 18px;margin: 2px;">
bbbbbbbbbbbbb
<img name="U+1F609" src="../../static/images/emoji/1f609.png" style="width: 18px;height: 18px;margin: 2px;">
cccccccccccccc

可以看到这个字符串是 aaaaaaaaaImg标签bbbbbbImg标签cccccc，
结果要求是aaaaaaU+1F608bbbbbbbbbU+1F609cccccccccccccc

尝试：感觉正则匹配还是可以的，但是怎么匹配到且替换为name属性这个就有点儿困难

Answer 1

let newStr = str.replace(/<img.*?>/mg, (s) => {
  let matchs = s.match(/(?<=name.*?=.*?)('|").*?\1/);
  return matchs ? matchs[0].slice(1, -1) : '';
});

Answer 2

不用正则，用 DOM API也可以，最近喜欢尝试奇技淫巧

let str = `aaaaaaaaaaaa
<img name="U+1F608" src="../../static/images/emoji/1f608.png" style="width: 18px;height: 18px;margin: 2px;">
bbbbbbbbbbbbb
<img name="U+1F609" src="../../static/images/emoji/1f609.png" style="width: 18px;height: 18px;margin: 2px;">
cccccccccccccc`
let div = document.createElement('div')
div.innerHTML = str
Array.from(div.children).forEach(img => {
  div.replaceChild(document.createTextNode(img.name), img)
})
console.log(div.innerHTML.replace(/\s/g, ''))

Answer 3

自己给出完整的答案

let str = 'aaaaaaaaaaaa\n' +
  '<img name="U+1F608" src="../../static/images/emoji/1f608.png" style="width: 18px;height: 18px;margin: 2px;">\n' +
  'bbbbbbb<img name="U+1F609" src="../../static/images/emoji/1f609.png" style="width: 18px;height: 18px;margin: 2px;">bbbbbb\n' +
  '<img name="U+1F609" src="../../static/images/emoji/1f609.png" style="width: 18px;height: 18px;margin: 2px;">\n' +
  'cccccccccccccc'
/* 方式1 */
// 匹配图片（g表示匹配所有结果i表示区分大小写）
let imgReg = /<img.*?(?:>|\/>)/gi
// 匹配src属性
let nameReg = /name=['"]?([^'"]*)['"]?/i
let arr = str.match(imgReg)
// console.log('所有已成功匹配图片的数组：' + arr)
for (let i = 0; i < arr.length; i++) {
  // console.log(arr[i])
  let names = arr[i].match(nameReg)
  // 获取图片地址
  if (names && names[1]) {
    // console.log('已匹配的图片地址' + (i + 1) + '：' + names[1])
    str = str.replace(arr[i], names[1])
  }
}
console.log(str)
/* 方式2 */
let newStr = str.replace(/<img.*?>/mg, s => {
  let matchs = s.match(/\(?<=name.*?=.*?\)('|").*?\1/)
  return matchs ? matchs[0].slice(1, -1) : ''
})
console.log(newStr)