从键值字符串中获取值答案

【问题标题】：Get value from key-value string从键值字符串中获取值
【发布时间】：2022-01-13 08:52:37
【问题描述】：

我有一个字符串：

const styleString = 'font-size: 24px; color: #f0f1f2; font-weight: 700;'

我想创建一个看起来像的函数

const getStyleFromString = (styleString, styleName) => {
  // some logics
  return styleValue  
}

const fontSize = getStyleFromString(styleString, 'font-size') // returns 24px

【问题讨论】：

创建一个临时元素，将其样式设置为该字符串并使用window.getComputedStyle 检索所需的值。或者，您可以构建自己的 CSS 解析器。
用;分割字符串并检查哪个元素以给定的字符串+:开头并返回。

标签： javascript html css

【解决方案1】：

想法是从字符串中删除:和;，拆分字符串并过滤生成的数组以找到您要查找的属性的索引并将该索引加1

const getStyleFromString = (styleString, styleName) => {
  let styleArray = styleString.replace(/;|:/g, '').split(" ")
  let styleKey = styleArray.findIndex(element => element === styleName)
  return styleArray[styleKey + 1]
}

【讨论】：

【解决方案2】：

只是一个快速的代码，例如：

const styleString = 'font-size: 24px; color: #f0f1f2; font-weight: 700;'

const getStyleFromString = (styleString, styleName) => {
  const [, value] = styleString
    .split(';')
    .map((style)=>style.split(':'))
    .find(([targetStyleName]) => 
      targetStyleName.trim().toLowerCase() === styleName.trim().toLowerCase()
    );
  
  return value.trim();
};

console.log(getStyleFromString(styleString, 'font-size'))
console.log(getStyleFromString(styleString, 'color'))
console.log(getStyleFromString(styleString, 'font-weight'))

.as-console-wrapper{min-height: 100%!important; top: 0}

JS 对象的另一种方式：

const styleString = 'font-size: 24px; color: #f0f1f2; font-weight: 700;'

const getStyleFromString = (styleString, styleName) => {
  const pairs = styleString
    .split(';')
    .map(pair => 
      pair.split(':').map(e => e.trim().toLowerCase()
    ));
  const obj = Object.fromEntries(pairs);
  
  return obj[styleName];
};

console.log(getStyleFromString(styleString, 'font-size'))
console.log(getStyleFromString(styleString, 'color'))
console.log(getStyleFromString(styleString, 'font-weight'))

.as-console-wrapper{min-height: 100%!important; top: 0}

【讨论】：

【解决方案3】：

试试这个

function parseStyleString(styleString) {
  return styleString.split(';').map(item => item.trim()).filter(style => style).map(styleItem => {
    const [property, value] = styleItem.split(':');
    return {property: property.trim(), value: value.trim()};
  });
}

function getStyleFromString(styleString, styleName) {
  const parsedStyle = parseStringStyle(styleString);
  
  const findStyle = parsedStyle.find(({property}) => styleName === property);
  
  return findStyle?.value;
}

console.log(getStyleFromString('font-size: 24px; color: #f0f1f2; font-weight: 700;', 'font-size')); // return "24px"

【讨论】：