JS查找并计算和替换富文本中的px为响应式单位

原创已于 2025-09-03 12:56:33 修改 · 298 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

GEO检测

标签

#javascript #前端

于 2024-06-07 15:02:22 首次发布

前言

因为在做官网响应式时有部分后台返回的内容为富文本，于是想着得把返回的富文本也改为具有响应式。

解决方案

通过replace批量匹配css样式字符串并把px像素单位替换成rem。

代码如下：

let html_str =
	`<p class="" style="padding: 0px; -webkit-font-smoothing: antialiased; list-style: none; margin-bottom: 0px; scrollbar-width: none; font-family: -apple-system, BlinkMacSystemFont, &quot;Segoe UI&quot;, Roboto, Ubuntu, &quot;Helvetica Neue&quot;, Helvetica, Arial, &quot;PingFang SC&quot;, &quot;Hiragino Sans GB&quot;, &quot;Microsoft YaHei UI&quot;, &quot;Microsoft YaHei&quot;, &quot;Source Han Sans CN&quot;, sans-serif, &quot;Apple Color Emoji&quot;, &quot;Segoe UI Emoji&quot;; font-size: 15px; line-height: 1.75; color: rgb(5, 7, 59); background-color: rgb(253, 253, 254);">随便写的文字</p>`;

html_str = html_str.replace(/\d+px/g, function(str) {
	let pixel = +str.split('px')[0];
	let rem = pixel * 0.03;
	console.log('转化为响应式单位: ', pixel + '=>' + rem);
	return rem + 'rem';
})
console.log('html_str: ', html_str);

思路：

使用/\d+px/g匹配到数字+px的字符串（如：20px，6px等），这样的字符串通常就是css的样式。
利用 'px' 进行分割，得到的分割后的数组的第一位就是数字值，并将数字字符串转为数字。

replace的第二个参数支持函数，里面可以接收到匹配到的值，可直接对值进行操作，返回要替换的值。
+ 加号为一元加号运算符，位于其操作数之前，可将其操作数转换为数字（如果尚未转换）

最后替换为我这边自己定义的rem单位。

已知1rem约为33px，所以1px约为0.03rem。

20px就是20*0.03=0.6

控制台输出

可以看到已经转换成功

为0的px可以写判断忽略掉，这里就不展示了