how to check if a class has some symbol and if it does, do something with it?

Question

this code uses classes as css properties and everything that comes after = - as the values of it.

ex:

function getProp(classStr) {
  return classStr.split('=')[0]
}

function getValues(classStr) {
  var values = classStr.split('=')[1]
  return values.split(',').join(' ')
}

function transform(el, prop, values) {
  $(el).css(prop, values)
}


var elements = $('div, p, span, img, li, ul, a, h1, h2, h3, h4, h5, h6')
elements.each(function(i, el) {
  var classList = $(el).attr('class')
  if (!classList) return
  var classProps = classList.split(' ')
  $(classProps).each(function(i, str) {
    var prop = getProp(str)
    var values = getValues(str)
    transform(el, prop, values)
  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='color=red font-size=50px font-family=arial'>hello world</div>

soo.. here's a problem. when you want to assign a property with multiple values, like border=2px,solid,black and if BEFORE it there's a class that doesn't even have the = sign, the whole code just crashes.

i guess it's because of the

function getValues(classStr) {
  var values = classStr.split('=')[1]
  return values.split(',').join(' ')
}

function??

how can we check if the property has no values (standart css class) or multiple values that are written with commas (border=2px,solid,black)?

Answer 1

You can use a regular expression to get your matched parameters. Notice I have added a class called taco that doesn't throw off the results

Here's a fully functional example, using your code as a basis

function transformValue(value) {
  if (!value.includes('rgb')) {
    return value.split(',').join(' ');
  }
  return value;
}

function transform(el, prop, values) {
  $(el).css(prop, values);
}


var elements = $('div, p, span, img, li, ul, a, h1, h2, h3, h4, h5, h6');
elements.each(function(i, el) {
  var classList = $(el).attr('class');
  if (!classList) return true;
  
  var regex = /([\w-]+)=([\w\d,%()\.]+)/g;
  var matches;
  var params = [];

  while (matches = regex.exec(classList)) {
    var prop = matches[1];
    var values = transformValue(matches[2]);
    transform(el, matches[1], values);
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='color=red font-size=50px font-family=arial taco border=1px,solid,red margin-left=20% background-color=rgba(0,255,0,0.5)'>hello world</div>

Reasoning and Performance

Some may question my choice to use a regular expression, as it has a bad reputation as being inefficient; however, given that a non-regular expression route only gave a 0.75% increase, I found the readability of my solution to be a good trade off.

https://jsperf.com/so53670448

Answer 2

This is weird and not really valid syntax for a class name/-list. Anyway, you wouldn't need jQuery to convert the class attribute string to a style attribute, and bonus, your code can be cleaner. Something along the lines of:

setStyle(document.querySelector("div#weird"));
setStyleFromShortcuts(document.querySelector("div#weirder"));

function setStyle(elemWithWeirdClass) {
  const weirdClass = Array.from(elemWithWeirdClass.classList);
  if (weirdClass.length < 1 || !weirdClass.join("").includes("=")) { return; }
  const converted = weirdClass
      .reduce( (styleElement, semiClass) => 
          [...styleElement, semiClass.split("=").join(":")], []).join(";");
  elemWithWeirdClass.removeAttribute("class");
  elemWithWeirdClass.setAttribute("style", converted);
}

function setStyleFromShortcuts(elemWithWeirdClass) {
  const shortCuts = {
    c: "color",
    fs: "font-size",
    ff: "font-face"
  }
  const weirdClass = Array.from(elemWithWeirdClass.classList);
  const getShortCut = ([key, value]) => `${shortCuts[key]}:${value}`;
  if (weirdClass.length < 1 || !weirdClass.join("").includes("=")) { return; }
  const converted = weirdClass
      .reduce( (styleElement, semiClass) => 
          [...styleElement, getShortCut(semiClass.split("="))], []).join(";");
  elemWithWeirdClass.removeAttribute("class");
  elemWithWeirdClass.setAttribute("style", converted);
}

<div id="weird" class='color=red font-size=50px font-family=arial'>hello world</div>

<div id="weirder" class='c=orange fs=50px ff=times new roman'>hello world</div>

Answer 3

Regular expression is more expensive than a simple indexOf this code its functionally give them a try...

This code also differ of yours by one "IF" ...

function getProp(classStr) {
  return classStr.split('=')[0]
}

function getValues(classStr) {
  var values = classStr.split('=')[1]
  return values.split(',').join(' ')
}

function transform(el, prop, values) {
  $(el).css(prop, values)
}


var elements = $('div, p, span, img, li, ul, a, h1, h2, h3, h4, h5, h6')
elements.each(function(i, el) {
  var classList = $(el).attr('class')
  if (!classList) return
  var classProps = classList.split(' ')



  $(classProps).each(function(i, str) {

    //if contain a symbol '=' is procesed, like a css
    //else do nothing ...because is a class
    if ( str.indexOf('=') > -1 ) {
        var prop = getProp(str)
        var values = getValues(str)
        transform(el, prop, values)
    }


  })
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class='color=red class-temporal border=1px,solid,red font-size=50px font-family=arial'>hello world</div>