100个酷炫的数据可视化大屏总有一款适合你(含演示实例)，30款 vue3 数据可视化大屏登录页下载

js将字符串中的所有数字px替换为px2rem(数字)

js yekong

数据可视化大屏在完成交付后，客户反馈不是他们想要的，这边开发时用vue3脚手架开发出来的，效果也按照客户的要求实现了，但是最终不是客户需要的，客户要的是普通的html+js+css，在做之前收到的通知是vue来写，现在要改成html+js+css，所以做之前一定要再三确认对框架的要求，避免返工。

因为一直是用vue脚手架来写的，改成普通的html+js+css,代码的px转rem就不能自动完成了，需要前端手动处理。

这里我们使用scss来写的css，可以写一个方法

@function px2rem($px) {
  @return $px / 100 * 1rem
}

我们需要将所有数字px替换为px2rem(数字)，字符少的话，还可以手动来处理，但是太多的话，我们就要考虑使用js来处理了。

处理前的css

.pageTop {
  width: 100%;
  height: 84px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
  position: absolute;
  z-index: 0;

  .left {
    width: 30%;
    position: relative;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;

    .address {
      font-size: 14px;
      font-family: PingFang;
      font-weight: 500;
      color: #C5E4FF;
      margin-left: 30px;
      margin-top: 50px;

      span {
        color: rgba(18, 244, 255, 1);
      }
    }
  }

  .right {
    width: calc(30% - 30px);
    margin-right: 30px;
    position: relative;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;

    .weather {
      font-size: 14px;
      font-family: PingFang;
      font-weight: 500;
      color: #C5E4FF;
      margin-top: 50px;
      margin-left: 20px;
    }

    .date {
      font-size: 14px;
      margin-top: 50px;
      font-family: PingFang;
      font-weight: 500;
      color: #C5E4FF;
    }
  }

  .title {
    position: relative;
    width: 40%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;

    span {
      font-size: 36px;
      font-family: PangMenZhengDao;
      font-weight: 400;
      color: #FBFFFF;
      letter-spacing: 3px;
    }
  }
}

如果CSS内容以字符串形式存在于JavaScript中，你可以直接使用正则表达式进行替换。下面是一个简单的例子，展示了如何将CSS字符串中的所有数字px替换为px2rem(数字):

// 示例CSS字符串
let cssStr = `
.pageTop {
  width: 100%;
  height: 84px;
  // ... 其他CSS规则 ...
}
`;

// 使用正则表达式将数字后的px替换为px2rem(数字)
cssStr = cssStr.replace(/(\d+)px/g, (match, p1) => `px2rem(${p1})`);

console.log(cssStr);  // 打印修改后的CSS字符串

在上面的代码中，我们使用了String.prototype.replace方法与正则表达式一起使用。正则表达式/(\d+)px/g匹配所有的数字px模式，其中\d+匹配一个或多个数字，px匹配字面字符串"px"，g标志表示全局匹配。

当replace方法的第二个参数是一个函数时，这个函数会为每个匹配的子串被调用。在上面的示例中，我们返回了字符串px2rem(数字)，其中数字是正则表达式匹配的第一个组的内容（即p1）。

js将字符串中的所有数字px替换为px2rem(数字)

我们调试输出后，就可以在控制面板里看到我们的代码了，复制出来再粘贴回去就可以了。

处理后的css

.pageTop {
  width: 100%;
  height: px2rem(84);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: nowrap;
  flex-direction: row;
  align-content: flex-start;
  position: absolute;
  z-index: 0;

  .left {
    width: 30%;
    position: relative;
    height: 100%;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;

    .address {
      font-size: px2rem(14);
      font-family: PingFang;
      font-weight: 500;
      color: #C5E4FF;
      margin-left: px2rem(30);
      margin-top: px2rem(50);

      span {
        color: rgba(18, 244, 255, 1);
      }
    }
  }

  .right {
    width: calc(30% - px2rem(30));
    margin-right: px2rem(30);
    position: relative;
    height: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;

    .weather {
      font-size: px2rem(14);
      font-family: PingFang;
      font-weight: 500;
      color: #C5E4FF;
      margin-top: px2rem(50);
      margin-left: px2rem(20);
    }

    .date {
      font-size: px2rem(14);
      margin-top: px2rem(50);
      font-family: PingFang;
      font-weight: 500;
      color: #C5E4FF;
    }
  }

  .title {
    position: relative;
    width: 40%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;

    span {
      font-size: px2rem(36);
      font-family: PangMenZhengDao;
      font-weight: 400;
      color: #FBFFFF;
      letter-spacing: px2rem(3);
    }
  }
}

部分不需要转换的地方手动改一下就完成了。

px转rem

为了可以快速使用，这里专门写了一个页面，可以快速实现我们想要的功能。

px转rem

喜欢