我看很多做前端的朋友，基本上都会碰到这个问题。比如，前端页面上要动态显示从后台接口返回的一串包含【DOM】节点的字符串。但是呢？有时候后台返回的这段字符串里面有个<img src="" alt="" />标签，而页面上图片因为地址原因又显示不出来，所以有时候就会有这么个需求，需要匹配到这段字符串里面的【img】标签，拿到它的【src】属性，可能会做判断可能会直接修改。 let reg = /(\/|http)[^>]+\.(jpg|jpeg|png|gif)/g 这个正则的适用以下场景，如下： 一、带返回http或者https开头的链接。(<img src="http://www.baidu.com/upload/baidu.jpg" />)； 二、直接返回服务器图片存储路径。(<img src="/upload/downFile/catalogue/baidu.jpg" />) let str = '<div style="text-align: center"><img alt="" src="/rooufiles/gather/A/ADMIN/1585793229899nhWuXs.jpg" /><br /></div><img alt="" src="https://www.baidu.com/baidu.jpg" />甜粄是一道美味可口的传统小吃，属于客家菜。主要食材有糯米、砂糖等制成。<br />' str.match(reg)第二种，就是利用我们JS的DOM节点操作去获取。比如后台返回的是这样的一串字符串； let str = '<div style="text-align: center"><img alt="" src="/rooufiles/gather/A/ADMIN/1585793229899nhWuXs.jpg" /><br /></div><img alt="" src="https://www.baidu.com/baidu.jpg" />甜粄是一道美味可口的传统小吃，属于客家菜。主要食材有糯米、砂糖等制成。<br />' 我们可以先创建一个临时节点 let tempDom = document.createElement('div') 然后将创建的节点填充 tempDom.innerHTML = tempDom 然后获得创建的临时节点下面所有的img标签； let imgs = tempDom.querySelectorAll('img') 再利用数组的方法去遍历； [].map.call(imgs,function(img){console.log(img.src)}) 这样就可以拿到了img的值，并且可以去修改； 同样的取一下 tempDom.innerHTML的值就好了。
先获取img标签，再访问id值
步骤
1、定义一个img
<body>
<img src='' id='test'/>
</body>
2、通过getElementsByTagName方式获取img
var imgs = document.getElementsByTagName('img')
alert(imgs[0].id)//获取img的id值test
使用JavaScript获取某个元素的属性值可以使用jQuery中的选择器+attr()方法。
工具原料：编辑器、浏览器
1、实现的思路是先使用选择器通过id获取到这个元素，然后使用attr方法获取某个属性的值，代码如下：
<div id="div1" class="test">
</div>
<script>
console.log($('#div1').attr('class'))
</script>
2、运行的结果是获取到了class的值test，
