javascript - 如何检查一个类是否有一些符号，如果有，用它做些什么？

Question

此代码使用类作为 css 属性，并将 = 之后的所有内容用作它的值。

例如:

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.. 这是一个问题。当你想为一个属性分配多个值时，比如 border=2px,solid,black 并且如果在它之前有一个类甚至没有 = 符号，整个代码就崩溃了。

我猜是因为

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

函数??

我们如何检查该属性是否没有值(标准 css 类)或用逗号书写的多个值(border=2px,solid,black)？

Answer 1

您可以使用正则表达式来获取匹配的参数。请注意，我添加了一个名为 taco 的类，它不会丢弃结果

这是一个功能齐全的示例，以您的代码为基础

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>

推理与表现

有些人可能会质疑我使用正则表达式的选择，因为它以效率低下而著称；然而，考虑到非正则表达式路由仅增加了 0.75%，我发现我的解决方案的可读性是一个很好的权衡。

https://jsperf.com/so53670448