js 匹配html中的图片
时间: 2023-02-07 21:28:32 浏览: 59
你可以使用 JavaScript 来匹配 HTML 中的图片。
使用 `querySelector` 方法来获取 HTML 中某个元素,然后使用 `getAttribute` 方法获取该元素的属性值。例如,若要获取 HTML 中第一张图片的地址,你可以使用以下代码:
```
var img = document.querySelector('img');
var src = img.getAttribute('src');
```
如果你想要获取所有的图片,你可以使用 `querySelectorAll` 方法。这个方法会返回一个包含所有符合条件的元素的 NodeList,你可以使用 for 循环来遍历这个 NodeList。
```
var imgs = document.querySelectorAll('img');
for (var i = 0; i < imgs.length; i++) {
var src = imgs[i].getAttribute('src');
console.log(src);
}
```
希望这对你有帮助!
相关问题
js正则表达式匹配富文本
在JavaScript中,可以使用正则表达式来匹配富文本中的内容。一般来说,我们可以使用正则表达式来匹配HTML标签,然后再从中提取出我们需要的内容,例如图片的URL等。下面是一个简单的例子:
```
function getImgUrl(content) {
let matchReg = /<img.*?(?:>|\/>)/gi; // 匹配图片中的img标签
let arr2 = content.match(matchReg); //拿到标签中所有的img
let srcReg = /src=[\'\"]?([^\'\"]*)[\'\"]?/i; // 匹配图片中的src
let imgUrl = "";
if (arr2 != null) {
let src = arr2[0].match(srcReg);
imgUrl = src[1];
}
return imgUrl;
}
```
这个函数可以用来获取富文本中的第一张图片的URL。它首先使用正则表达式匹配所有的img标签,然后从中提取出第一个标签的src属性值作为图片的URL。需要注意的是,这个函数只能获取第一张图片的URL,如果需要获取所有图片的URL,需要对正则表达式进行修改。
js正则修改html中src的内容,正则替换html中的src路径为全路径
可以使用JavaScript的正则表达式和字符串操作来实现将相对路径替换为绝对路径的功能。
假设你有一个HTML文件,其中包含了一些图片或其他资源,它们的路径是相对于HTML文件的。你想把这些路径替换为绝对路径,可以使用如下的代码:
```javascript
let html = '<html><body><img src="./images/cat.jpg" /></body></html>';
// 获取当前页面的URL
let baseURL = window.location.href;
// 替换src属性的值
html = html.replace(/src="([^"]*)"/g, function(match, src) {
// 将相对路径转换为绝对路径
let absoluteURL = new URL(src, baseURL).href;
return 'src="' + absoluteURL + '"';
});
console.log(html);
```
在上面的代码中,我们首先获取了当前页面的URL,然后使用正则表达式匹配HTML中所有的`src`属性,并通过回调函数将其替换为绝对路径。在回调函数中,我们使用`URL`对象将相对路径转换为绝对路径。
注意,如果HTML中的路径已经是绝对路径,则不会被替换。
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)