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）写入的多个值？

标签： javascriptjqueryhtmlcss

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