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

duan
  • 32

需求: 需求是将字符串中一个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属性这个就有点儿困难

回复
阅读 2.5k
3 个回答
✓ 已被采纳
let newStr = str.replace(/<img.*?>/mg, (s) => {
  let matchs = s.match(/(?<=name.*?=.*?)('|").*?\1/);
  return matchs ? matchs[0].slice(1, -1) : '';
});

不用正则,用 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, ''))

自己给出完整的答案

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)
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏