js使用正则表达式将字符串里面的img标签src的值提取出来

JavaScript016

js使用正则表达式将字符串里面的img标签src的值提取出来,第1张

我看很多做前端的朋友,基本上都会碰到这个问题。比如,前端页面上要动态显示从后台接口返回的一串包含【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的值就好了。 

网址: http://1.com/

调用: QueryString('name')

返回: null

网址: http://1.com/?name=cwj&age=21

调用: QueryString('name')

返回: cwj

现在随便拿一个网址: https://m.weibo.cn/u/5902368392?topnav=1&wvr=6&is_all=1&jumpfrom=weibocom ,这个网址的 location 是:

所以这个地址的 location.search 是 ?topnav=1&wvr=6&is_all=1&jumpfrom=weibocom ,这就是需要执行匹配的字符串

match() 方法可在字符串内检索指定的值,或找到一个或多个正则表达式的匹配。

存放匹配结果的数组。在这个方法中将匹配结果放在了数组 sValue 中。

RegExp 对象表示正则表达式

该对象接受两个参数,第一个参数是一个字符串,指定了正则表达式的模式或其他正则表达式。第二个参数 i 代表着区分大小写的匹配。

调用该方法: QueryString('wvr') ,根据以上正则表达式匹配出来的结果是:

要注意的是 match 方法返回的数组 0 位置是匹配的字符串,所以相应参数在 sValue[1] 中