JSFiddle - React, Tailwind, and code Playground

by luwes

JavaScript

const str = `
    font: var(--media-font,
      var(--media-font-weight, bold)
      var(--media-font-size, 14px) /
      var(--media-text-content-height, var(--media-control-height, 24px))
      var(--media-font-family, helvetica neue, segoe ui, roboto, arial, sans-serif));
    background-image: var(--bg-image, url('https://'));
    color: var(--media-text-color, var(--media-primary-color, rgb(238 238 238)));
`;


matchRecursive(str, /var\(/m, (a, b, c) => {
	console.log(b);
	return [a, b + c];
})



// Adapted from https://stackoverflow.com/a/53620612/268820

function matchRecursive(s, prefix, onmatch, startChar = '(', endChar = ')') {
 let m;
 let start = 0;
 let input = s; 
 
 while (m = (input = s.slice(start)).match(prefix)) {
 		
    let endOffset = m.index + m[0].length;
    let counter = 1;
    let skipUntil = '';
    let i = endOffset;
    
    for (; i < input.length; i++) {

        let c = input[i];
        if (counter === 0) {
        	break;
        }
        
        if (c === skipUntil) {
        	skipUntil = '';
            
        } else if (c === '"') {
        	skipUntil = '"';
          
        } else if (c === "'") {
        	skipUntil = "'";
          
        } else if (c === startChar) {
        	counter++;
          
        } else if (c === endChar) {
        	counter--;
        }
    }
    
    if (counter === 0) {
    
    	let result = onmatch(m[0], input.slice(endOffset, i - 1), endChar);
      
      s = s.slice(0, start + m.index) + result[0] + result[1] + s.slice(start + i);
      
    }
    
    start += endOffset;
 }

 return s
}