Escribí un script que extrae la declaración @font-face de CSS y ahora me gustaría convertirlo en un objeto javascript. Aquí hay un ejemplo de cómo se verá la cadena original:
{font-family:GT Alpina;font-weight:100;src:url(/next/contenthash/next/fonts/gt-alpina/thin/GT-Alpina-Standard-Thin.contenthash.3322f75174e682b58d25cca4c516f38b51edb6ef.woff2) format("woff2");font-display:swap}Esa es la cadena que me gustaría convertir en un objeto ^.
Intenté usar JSON.parse() , pero no funciona porque no es una cadena codificada en JSON. ¿Hay una forma simple que me falta para convertir esta cadena en un objeto javascript, o tendré que recorrerla y convertirla manualmente?
Cualquier ayuda es apreciada, ¡gracias!
El punto clave es usar expresiones regulares para convertir CSS a formato JSON y luego usar JSON.parse . En el código se incluye una descripción de cada replace de repuesto.
var css = '{font-family:GT Alpina;font-weight:100;src:url(/next/contenthash/next/fonts/gt-alpina/thin/GT-Alpina-Standard-Thin.contenthash.3322f75174e682b58d25cca4c516f38b51edb6ef.woff2) format("woff2");font-display:swap}'; cssObject = JSON.parse(css .replace(/"/g, '\\"') // add \ before " .replace(/\s*\{\s*/, '{"') // add start " .replace(/\s*;?\s*\}\s*/, '"}') // add end " .replace(/\s*:\s*/g, '":"') // replace : with ":" .replace(/\s*;\s*/g, '","') // replace ; with "," ); console.log("CSS Object: ", cssObject); Para convertir claves a formato camello se requiere otro replace como el siguiente código:
var css = '{font-family:GT Alpina;font-weight:100;src:url(/next/contenthash/next/fonts/gt-alpina/thin/GT-Alpina-Standard-Thin.contenthash.3322f75174e682b58d25cca4c516f38b51edb6ef.woff2) format("woff2");font-display:swap}'; cssObject = JSON.parse(css .replace(/"/g, '\\"') // add \ before " .replace(/\s*\{\s*/, '{"') // add start " .replace(/\s*;?\s*\}\s*/, '"}') // add end " .replace(/\s*:\s*/g, '":"') // replace : with ":" .replace(/\s*;\s*/g, '","') // replace ; with "," .replace(/"([^"]+)":/g, (full, property) => '"' + property.toLowerCase().replace(/-(\w)/, (a, b) => b.toUpperCase()) + '":') ); console.log("CSS Object with Camel Format: ", cssObject);