tengo una cadena:
const styleString = 'font-size: 24px; color: #f0f1f2; font-weight: 700;'y me gustaría crear una función que se vea como
const getStyleFromString = (styleString, styleName) => { // some logics return styleValue } const fontSize = getStyleFromString(styleString, 'font-size') // returns 24pxSolo un código rápido, por ejemplo:
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}Otra forma con el objeto 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}La idea es eliminar : y ; de la cadena, divida la cadena y filtre la matriz generada para encontrar el índice de la propiedad que está buscando y agregue 1 a ese índice
const getStyleFromString = (styleString, styleName) => { let styleArray = styleString.replace(/;|:/g, '').split(" ") let styleKey = styleArray.findIndex(element => element === styleName) return styleArray[styleKey + 1] }prueba esto
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"