js正则修改html中src的内容,正则替换html中的src路径为全路径
时间: 2024-01-21 13:19:20 浏览: 29
可以使用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中的路径已经是绝对路径，则不会被替换。
相关问题
Ueditor中如何使用setContent（） 不改变html里的图片路径
在使用 `setContent` 方法设置 HTML 内容时，Ueditor 提供了一个 `filterTxt` 方法，可以过滤掉 HTML 内容中的一些不需要的属性或元素，从而保留图片等资源文件的相对路径。
使用 `filterTxt` 方法的具体步骤如下：
1. 获取需要设置的 HTML 内容。
```javascript
var content = "<p>这是一段包含图片的 HTML 内容</p><img src='img/pic.jpg'>";
```
2. 在设置 HTML 内容之前，调用 `filterTxt` 方法对 HTML 内容进行过滤。
```javascript
content = editor.getOpt('filterTxt')(content);
```
3. 使用 `setContent` 方法设置过滤后的 HTML 内容。
```javascript
editor.setContent(content);
```
4. 在保存 HTML 内容时，如果需要将相对路径转换为绝对路径，可以使用 `getContent` 方法获取 HTML 内容，然后使用正则表达式替换相对路径。
```javascript
var content = editor.getContent();
content = content.replace(/src=['"]([^'"]+)['"]/g, function(match, p1) {
var absoluteUrl = new URL(p1, window.location.href).href;
return 'src="' + absoluteUrl + '"';
});
```
这样做的效果是过滤掉 HTML 内容中的一些不需要的属性或元素，并保留图片等资源文件的相对路径。在保存 HTML 内容时，可以将相对路径转换为绝对路径，从而避免图片等资源文件路径出错的问题。
我想替换的是 <image src="xxxx" />的地址
如果你想替换的是 `<img>` 标签中的 `src` 属性，那么你需要修改 JavaScript 代码中的正则表达式，以匹配 `<img>` 标签的 `src` 属性。下面是修改后的示例代码：
```java
public class MyWebViewClient extends WebViewClient {
@Override
public void onPageFinished(WebView view, String url) {
super.onPageFinished(view, url);
String javascript = "javascript:(function() {"
+ "var imgs = document.getElementsByTagName('img');"
+ "for (var i = 0; i < imgs.length; i++) {"
+ "var img = imgs[i];"
+ "var url = img.getAttribute('src');"
+ "if (url.startsWith('http')) {"
+ "var xhr = new XMLHttpRequest();"
+ "xhr.open('GET', url, true);"
+ "xhr.responseType = 'arraybuffer';"
+ "xhr.onload = function() {"
+ "if (xhr.status === 200) {"
+ "var uInt8Array = new Uint8Array(xhr.response);"
+ "var i = uInt8Array.length;"
+ "var binaryString = new Array(i);"
+ "while (i--) {"
+ "binaryString[i] = String.fromCharCode(uInt8Array[i]);"
+ "}"
+ "var data = binaryString.join('');"
+ "var base64 = window.btoa(data);"
+ "img.setAttribute('src', 'data:image/png;base64,' + base64);"
+ "}"
+ "};"
+ "xhr.send();"
+ "}"
+ "}"
+ "})()";
view.loadUrl(javascript);
}
}
```
这段代码中，我们使用 `img.getAttribute('src')` 来获取 `<img>` 标签的 `src` 属性，然后将其替换为 Base64 编码字符串。同样，你需要将图片的本地路径替换为对应的路径。
相关推荐
最新推荐
JS正则替换掉小括号及内容的方法
下面小编就为大家带来一篇JS正则替换掉小括号及内容的方法。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
MySQL中使用replace、regexp进行正则表达式替换的用法分析
本文实例讲述了MySQL中使用replace、regexp进行正则表达式替换的用法。分享给大家供大家参考，具体如下： 今天一个朋友问我，如果将数据库中查到的类似于“./uploads/110100_cityHotel_北京富豪华宾馆.jpg”这样的...
使用JS正则表达式 替换括号,尖括号等
下面小编就为大家带来一篇使用JS正则表达式 替换括号,尖括号等。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧
java正则表达式提取html中的信息
java实现用正则表达式的方法提取html中的信息，可以提取标题，正文，链接等。经过运行，没问题的
Java使用正则表达式提取XML节点内容的方法示例
主要介绍了Java使用正则表达式提取XML节点内容的方法,结合具体实例形式分析了java针对xml格式字符串的正则匹配相关操作技巧,需要的朋友可以参考下
zigbee-cluster-library-specification
最新的zigbee-cluster-library-specification说明文档。
管理建模和仿真的文件
管理Boualem Benatallah引用此版本：布阿利姆·贝纳塔拉。管理建模和仿真。约瑟夫-傅立叶大学-格勒诺布尔第一大学，1996年。法语。NNT：电话：00345357HAL ID：电话：00345357https://theses.hal.science/tel-003453572008年12月9日提交HAL是一个多学科的开放存取档案馆，用于存放和传播科学研究论文，无论它们是否被公开。论文可以来自法国或国外的教学和研究机构，也可以来自公共或私人研究中心。L’archive ouverte pluridisciplinaire
实现实时数据湖架构：Kafka与Hive集成
# 1. 实时数据湖架构概述**
实时数据湖是一种现代数据管理架构，它允许企业以低延迟的方式收集、存储和处理大量数据。与传统数据仓库不同，实时数据湖不依赖于预先定义的模式，而是采用灵活的架构，可以处理各种数据类型和格式。这种架构为企业提供了以下优势：
- **实时洞察：**实时数据湖允许企业访问最新的数据，从而做出更明智的决策。
- **数据民主化：**实时数据湖使各种利益相关者都可
list根据id查询pid 然后依次获取到所有的子节点数据
可以使用递归的方式来实现根据id查询pid并获取所有子节点数据。具体实现可以参考以下代码：
```
def get_children_nodes(nodes, parent_id):
children = []
for node in nodes:
if node['pid'] == parent_id:
node['children'] = get_children_nodes(nodes, node['id'])
children.append(node)
return children
# 测试数
JSBSim Reference Manual
JSBSim参考手册，其中包含JSBSim简介，JSBSim配置文件xml的编写语法，编程手册以及一些应用实例等。其中有部分内容还没有写完，估计有生之年很难看到完整版了，但是内容还是很有参考价值的。