Divide the string into sections and provide an object as output

Question

Divide the string into sections and provide an object as output

I encountered a roadblock while working on a tool.

My task involves accessing the stylesheet object of a website and specifically retrieving the "CSSFontFaceRule". I managed to accomplish this, but the output in my returned object is a lengthy string. I aim to break down the string into an object format. I have also prepared a fiddle for reference: http://jsfiddle.net/9eoytc6v/1/

This represents my current situation:

@font-face {font-family: "Test-Book";
src: 
    url("https://fontserver.xyz/test.eot?#iefix") format("embedded-opentype"),
    url("https://fontserver.xyz/test.woff2") format("woff2"),
    url("https://fontserver.xyz/test.woff") format("woff"),
    url("https://fontserver.xyz/test.ttf") format("truetype"),
    url("https://fontserver.xyz/test.svg#Test-Book") format("svg");
}

let fonts = {};

function getFontPairs(obj) {
  let object = obj || {},
    stylesheet = document.styleSheets,
    rule = null,
    length = stylesheet.length,
    j;
  while (0 <= --length) {
    rule = stylesheet[length].rules || stylesheet[length].cssRules || [];
    j = rule.length;
    while (0 <= --j) {
      if (rule[j].constructor.name === "CSSFontFaceRule") {
        let sourcesString = rule[j].style.src;
        let re = /\s*(?:,|$)\s*/;
        let sources = sourcesString.split(re);
        let final = [];

        sources.forEach(function(element){
        let reg = /[ ,]+/;
        let srcArray = element.split(reg);
        srcArray = srcArray.reverse();
        final.push(srcArray);
        });

       object[rule[j].style.fontFamily] = final;


      }
    }
  }
  return object;
}

getFontPairs(fonts);
console.log(fonts);

I attempted to use arrays but the outcome is somewhat disorganized: Current array solution

My goal is to achieve a structure similar to this: Expected object solution

As I am not proficient with RegEx at the moment, I want to remove the url("") and the format("") as well. Any assistance provided would be greatly appreciated. Perhaps someone can offer a more efficient version of my code.

javascript css arrays regex javascript-objects

Answer 1

Answer №1

To extract the URL and format from each source string, a simple regex can be used to match what is inside double or single quotes. For example, the following regex can be used to match the URL:

/url\(.(.+?).\)/

This regex means to match anything between url(. and .). The parentheses are escaped so that the regex does not perceive them as a group. The . (any character) matches the quotes (double or single). The (.+?) part represents the URL we are interested in, utilizing the non-greedy mode with the ? so it matches the fewest characters possible. This prevents matching beyond the URL into the format section, avoiding issues like:

https://fontserver.xyz/test.eot?#iefix") format("embedded-opentype

.

To create an object, the sources can be reduced into one using the following method:

let sourcesObj = sources.reduce((acc, source) => {
  let format = source.match(/format\(.(.+?).\)/)[1],
      url = source.match(/url\(.(.+?).\)/)[1];

  acc[format] = { format, url };
  return acc;
}, {});

Full Code:

// JavaScript Function to Get Font Pairs
function getFontPairs() {
  let object = {},
    stylesheet = document.styleSheets,
    rule = null,
    length = stylesheet.length,
    j;

  while (0 <= --length) {
    rule = stylesheet[length].rules || stylesheet[length].cssRules || [];
    j = rule.length;

    while (0 <= --j) {
      if (rule[j].constructor.name === "CSSFontFaceRule") {
        let sourcesString = rule[j].style.src;
        let sources = sourcesString.split(/\s*,\s*/);

        let sourcesObj = sources.reduce((acc, source) => {
          let format = source.match(/format\(.(.+?).\))/[1],
              url = source.match(/url\(.(.+?).\)/)[1];
          
          acc[format] = { format, url };
          return acc;

        }, {});

        object[rule[j].style.fontFamily] = sourcesObj;
      }
    }
  }

  return object;
}

// Execute the function and display results
let fonts = getFontPairs();
console.log(fonts);

Note: An alternative regex for URL and format could be:

/url(\s*["'](.+?)["']\s*)/

This regex accounts for cases with extra spaces like url( "..." ) and ensures it looks for either double (") or single (') quotes. Similar adjustments could be made for the format regex.

EDIT:

If a source lacks a field, ensure the format and URL regexes do indeed find a match before accessing the group [1]:

let sourcesObj = sources.reduce((acc, source) => {
  let format = source.match(/format\(.(.+?).\)/),
      url = source.match(/url\(.(.+?).\)/);

  if(format && url) {
    acc[format[1]] = { format: format[1], url: url[1] };
  }

  return acc;

}, {});

EDIT 2:

In cases where the format is missing, replace it with "Unknown":

let sourcesObj = sources.reduce((acc, source) => {
  let format = source.match(/format\(.(.+?).\)/),
      url = source.match(/url\(.(.+?).\)/)[1];

  format = format ? format[1] : "Unknown";

  acc = { format, url };

  return acc;

}, {});

Answer 2

To extract the URL and format from each source string, a simple regex can be used to match what is inside double or single quotes. For example, the following regex can be used to match the URL:

/url\(.(.+?).\)/

This regex means to match anything between url(. and .). The parentheses are escaped so that the regex does not perceive them as a group. The . (any character) matches the quotes (double or single). The (.+?) part represents the URL we are interested in, utilizing the non-greedy mode with the ? so it matches the fewest characters possible. This prevents matching beyond the URL into the format section, avoiding issues like:

https://fontserver.xyz/test.eot?#iefix") format("embedded-opentype

.

To create an object, the sources can be reduced into one using the following method:

let sourcesObj = sources.reduce((acc, source) => {
  let format = source.match(/format\(.(.+?).\)/)[1],
      url = source.match(/url\(.(.+?).\)/)[1];

  acc[format] = { format, url };
  return acc;
}, {});

Full Code:

// JavaScript Function to Get Font Pairs
function getFontPairs() {
  let object = {},
    stylesheet = document.styleSheets,
    rule = null,
    length = stylesheet.length,
    j;

  while (0 <= --length) {
    rule = stylesheet[length].rules || stylesheet[length].cssRules || [];
    j = rule.length;

    while (0 <= --j) {
      if (rule[j].constructor.name === "CSSFontFaceRule") {
        let sourcesString = rule[j].style.src;
        let sources = sourcesString.split(/\s*,\s*/);

        let sourcesObj = sources.reduce((acc, source) => {
          let format = source.match(/format\(.(.+?).\))/[1],
              url = source.match(/url\(.(.+?).\)/)[1];
          
          acc[format] = { format, url };
          return acc;

        }, {});

        object[rule[j].style.fontFamily] = sourcesObj;
      }
    }
  }

  return object;
}

// Execute the function and display results
let fonts = getFontPairs();
console.log(fonts);

Note: An alternative regex for URL and format could be:

/url(\s*["'](.+?)["']\s*)/

This regex accounts for cases with extra spaces like url( "..." ) and ensures it looks for either double (") or single (') quotes. Similar adjustments could be made for the format regex.

EDIT:

If a source lacks a field, ensure the format and URL regexes do indeed find a match before accessing the group [1]:

let sourcesObj = sources.reduce((acc, source) => {
  let format = source.match(/format\(.(.+?).\)/),
      url = source.match(/url\(.(.+?).\)/);

  if(format && url) {
    acc[format[1]] = { format: format[1], url: url[1] };
  }

  return acc;

}, {});

EDIT 2:

In cases where the format is missing, replace it with "Unknown":

let sourcesObj = sources.reduce((acc, source) => {
  let format = source.match(/format\(.(.+?).\)/),
      url = source.match(/url\(.(.+?).\)/)[1];

  format = format ? format[1] : "Unknown";

  acc = { format, url };

  return acc;

}, {});

Divide the string into sections and provide an object as output

Answer №1

Similar questions

What drawbacks come with developing an Express.js application using TypeScript?

Adjust the jQuery.animate function based on the specific value

Functions for abbreviating and combining strings in Javascript

What causes Font Awesome 5 icons to vanish when changing the font-family?

Guide to logging out from a website using AngularJS

Send a personalized array from Javascript to a Spring Rest Service using Ajax

Creating an Array of Objects in JAVA - A Step by Step Guide

Step-by-step guide for adding an icon to the corner of a Material UI button

Unable to access the response body of a POST request from an external API within Firebase Cloud Functions

What methods are available to load sections of a complex SVG shape asynchronously?

Utilizing malloc for dynamic allocation of multi-dimensional arrays with varying row sizes

Converting Typescript objects containing arrays into a single array

Issue with Checkbox Functionality Between Parent and Child Components in React.js

ReactJS - Unable to access property of undefined object

In a Twitter Bootstrap environment, the button cursor transforms into an I-beam when activated

Calculate the combined sum and alter the values of three input fields

Trigger a function on q-select change using onChange event (Quasar Framework)

HTML image identifier and canvas elements

Combining and sorting cursor data from multiple collections based on date

Node.js is throwing a TypeError: Unable to access the property 'url' of null, yet the application is functioning properly