微信小程序正则img标签替换

使用 : replace


在这里插入代码片
let html = ''
let requestURL = 'www.xxxx.com/'
let cont = '<p>阿达发大水发大水发放<img alt="" height="192" src="/upload/64a3be83df05a.jpg" style="max-width: 100%; border: 0px none;" width="115" /></p>'
let reg = new RegExp("<img [^>]*src=['\"]([^'\"]+)[^>]*>", "g");
html = cont.replace(reg, function (match, capture) {
      console.log(match)
      console.log(capture)
      return '<img src="'+requestURL+capture+'" style="max-width:100%;height:auto;display:block;margin:0 auto" />'
  });

// 返回结果:<p>阿达发大水发大水发放<img src="http://xxxx.cn/upload/64a3be83df05a.jpg" style="max-width:100%;height:auto;display:block;margin:0 auto" /></p>
### 微信小程序文本首行缩进的实现方法 在微信小程序开发中,`rich-text` 组件用于解析 HTML 格式的代码。然而,由于 `rich-text` 不支持外部 CSS 的引入,因此无法通过传统的 CSS 方法来设置文本的首行缩进效果。可以通过 JavaScript 对 HTML 字符串进行预处理,在 `<p>` 或其他标签中动态添加行内样式以实现首行缩进的效果。 以下是具体的实现方式: #### 使用正则表达式替换 `<p>` 标签 通过对返回的内容字符串进行正则匹配和替换操作,可以在每个段落的 `<p>` 标签下嵌入 `style="text-indent: 2em;"` 属性,从而达到首行缩进的目的。 ```javascript // 获取服务器返回的文章内容 let content = res.data.articleVo.content; // 替换 <p> 标签,增加 text-indent 风格属性 content = content.replace(/<p/g, '<p style="text-indent: 2em;"'); // 将修改后的 HTML 渲染到 rich-text 中 this.setData({ articleContent: content, }); ``` 此代码片段会将所有的 `<p>` 标签替换成带有 `text-indent` 行内样式的版本[^1]。 #### 动态调整图片和其他元素 除了实现首行缩进外,还可以利用类似的逻辑对图片或其他特殊元素进行额外的样式优化。例如,使图片居中显示或者固定宽度高度比例等。 ```javascript // 图片路径替换与样式增强 let reImg = /<img [^>]*>/gi; content = content.replace(reImg, match => { return match.replace(/<img/, '<img style="display:block;margin:auto;width:100%;height:auto;"'); }); // 更新数据源供页面展示 this.setData({ articleContent: content }); ``` 以上脚本不仅解决了文本首行缩进的问题,还兼顾了图片布局的一致性和美观度[^1]。 --- ### 注意事项 - **性能考量**:如果文章内容非常庞大,则频繁调用 replace 可能会影响程序效率。建议仅针对必要的部分执行替换。 - **跨平台兼容性测试**:尽管上述方案适用于大多数场景下的微信小程序环境,但在实际项目部署前仍需充分验证其表现是否一致。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值