Question

0

37

Views

Get value from key-value string

I have a string:

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

and I'd like to create a function which will looks like

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

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

3 months ago ·

Juan Pablo Isaza

3 answers

Answer question

0

Answer question

Find remote jobs

Loading

Answer 1 · 2022-07-05T08:28:48.252Z

Just a quick code, for example:

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}

Another way with JS object:

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}

Answer 2 · 2022-07-05T08:28:48.265Z

The idea is to remove : and ; from the string, split the string and filter the array generated to find the index of the property you are looking for and add 1 to that index

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

Answer 3 · 2022-07-05T08:28:48.272Z

try this

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"