typescript/javascript 解析css属性值中的长度单位

最新推荐文章于 2022-09-21 14:48:05 发布

siaikin

最新推荐文章于 2022-09-21 14:48:05 发布

阅读量479

点赞数 1

分类专栏： JS TS

本文链接：https://blog.csdn.net/CrhEH/article/details/87945954

版权

本文介绍如何在typescript和javascript中解析CSS属性值中的长度单位。通过建立常用单位的字典树，从字符串末尾向前解析，确保单位的正确性。文章提供了详细的解析代码示例，并附带了一个完整的字典树。

摘要由CSDN通过智能技术生成

typescript/javascript 解析css属性值中的长度单位

MDN关于css长度数据格式的文档

常用单位的字典树

说明:
child: 子节点
exist: 从根节点到当前节点组成的字符串是否是一个符合要求的单位
例: 如下json对象表示字符串vb是一个符合要求的单位

b节点的exist属性为false表示字符串b不是一个符合要求的单位
在child属性下v的exist值为true表示字符串vb不是一个符合要求的单位

注意: 解析时是从被解析的字符串末尾向前解析的，因为单位是在最后的
完整的字典树在文章末尾

child: {
   
      'b': {
   
        exist: false,
        child: {
   
          'v': {
   
            exist: true,
            child: {
   
            }
          }
        }
      }

主要代码

参数说明:

object: unitMap: 保存着用于解析str的字典树(见文章末尾
string: str: 待解析的字符串
可选参数
- boolean: caseSensitive: 是否大小写敏感(默认为false)
返回值是一个json对象{unit: 单位, number: 数值}

typescript

checkUnit(unitMap: any, str: string, caseSensitive?: boolean): {
   
    unit: string,
    number: number
  } {
   
    if (!unitMap || !str) {
    return; }
    if (!caseSensitive) {
    str = str.toLocaleLowerCase(); }
    let i: number, isMatch = false;
    for (i = str.length - 1; i >= 0; i--) {
   
      const ascii = str.charCodeAt(i);
      if (ascii >= 48 && ascii <= 57) {
   
        isMatch = unitMap.exist;
        break;
      } else {
   
        if (!unitMap.child[str[i]]) {
    break; }
        unitMap = unitMap