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

喜欢 (0)