Javascript /将CSS样式字符串转换为JS对象

Question

我们想将作为字符串输入的CSS样式转换为JS对象.

例如,

 var input = " border:solid 1px; color:red ";

预期的JS对象:

 {
    border:"solid 1px",
    color:"red"
 }

当然,样式条目的数量是无限的,以及样式的名称(边框,颜色,字体,z-index等).谢谢.

Answer 1

一个非常简单的:

var regex = /([\w-]*)\s*:\s*([^;]*)/g;
var match, properties={};
while(match=regex.exec(cssText)) properties[match[1]] = match[2].trim();

https://regex101.com/r/nZ4eX5/1

Answer 2

您可以使用 Javascript split 函数：https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/split

首先使用 分割字符串作为;分隔符，然后使用 分割每个结果:，将项目放入对象中。

例如

var result = {},
    attributes = input.split(';');

for (var i = 0; i < attributes.length; i++) {
    var entry = attributes[i].split(':');
    result[entry.splice(0,1)[0]] = entry.join(':');
}

Answer 3

使用 JavaScript 将样式表字符串转换为元素样式

仅使用字符串CSSStyleDeclaration.cssText：

const styles = "color: #222; background: orange; font-size: 2em;";
document.querySelector("#test").style.cssText = styles;

<div id="test">Lorem Ipsum</div>

JavaScript 实现

如果您需要将 CSS 样式字符串转换为Object：

const css2obj = css => {
  const r = /(?<=^|;)\s*([^:]+)\s*:\s*([^;]+)\s*/g, o = {};
  css.replace(r, (m,p,v) => o[p] = v);
  return o;
};

const cssObj = css2obj("color: #222; background: orange; font-size: 2em;");
console.log(cssObj);

// To apply use:
const elTest = document.querySelector("#test");
Object.assign(elTest.style, cssObj);

<div id="test">Lorem Ipsum</div>

如果你想将dash-caseCSS 属性转换为 JS 表示camelCase，而不是p使用p.replace(/-(.)/g, (m,p) => p.toUpperCase())

老派 JS：

function cssToObj(css) {
  var obj = {}, s = css.toLowerCase().replace(/-(.)/g, function (m, g) {
    return g.toUpperCase();
  }).replace(/;\s?$/g,"").split(/:|;/g);
  for (var i = 0; i < s.length; i += 2) {
    obj[s[i].replace(/\s/g,"")] = s[i+1].replace(/^\s+|\s+$/g,"");
  }
  return obj;
}

console.log( cssToObj("color: #222; background: orange; font-size: 2em;") );

Answer 4

以函数形式：

var styleInput = " border:solid 1px; color:red ";

var result = styleInput.split(';').reduce(function (ruleMap, ruleString) {
    var rulePair = ruleString.split(':');
    ruleMap[rulePair[0].trim()] = rulePair[1].trim();

    return ruleMap;
}, {});

在将字符串用作对象键之前修剪它们。