Question

我希望能够解析内联css并将其作为密钥对中的对象。类似的东西：

<div background-image: url('http://domain.com/images/image.jpg');background-size: cover;padding: 100px 0;">

{ 
  backgroundImage : "http://domain.com/images/image.jpg",
  backgroundSize: "cover",
  padding: "100px 0"
}

此功能适用于大部分内容。我有背景图片的问题

它完全剥离它，我最终得到＆＃34; url（http＆＃34;相反。

function parseCss(el) {
    var output = {};

    if (!el || !el.attr('style')) {
        return output;
    }

    var camelize = function camelize(str) {
        return str.replace(/(?:^|[-])(\w)/g, function(a, c) {
            c = a.substr(0, 1) === '-' ? c.toUpperCase() : c;
            return c ? c : '';
        });
    }

    var style = el.attr('style').split(';');
    for (var i = 0; i < style.length; ++i) {
        var rule = style[i].trim();
        if (rule) {
            var ruleParts = rule.split(':');
            var key = camelize(ruleParts[0].trim());
            output[key] = ruleParts[1].trim();
        }
    }

    return output;
}

我非常确定＆＃34;替换＆＃34;需要修改函数以使其与图像URL一起使用

Answer 1

您可以迭代style属性，而不是阅读style属性。这样可以避免嵌入样式值的分隔符出现问题：

＆＃13;

function parseCss(el) {
    function camelize(key) {
        return key.replace(/\-./g, function (m) {
            return m[1].toUpperCase();
        });
    }
    
    var output = {};
    for (var a of el.style) {
        output[camelize(a)] = el.style[a];
    }
    return output;
}
// Demo 
var css = parseCss(document.querySelector('div'));
console.log(css);

＆＃13;

<div style="background-image: url('http://domain.com/images/image.jpg');background-size: cover;padding: 100px 0;">
</div>

＆＃13;

这会扩展您在style属性中可以拥有的某些统一样式，例如padding，它会分为paddingLeft，paddingRight，......等< / p>

通过使用更多ES6功能，可以将上述内容浓缩为：

＆＃13;

function parseCss(el) {
    let camelize = key => key.replace(/\-./g, m => m[1].toUpperCase());
    return Object.assign(
        ...Array.from(el.style, key => ({[camelize(key)]: el.style[key]})));
}
// Demo 
let css = parseCss(document.querySelector('div'));
console.log(css);

＆＃13;

<div style="background-image: url('http://domain.com/images/image.jpg');background-size: cover;padding: 100px 0;">
</div>

＆＃13;

Answer 2

你可能会做这样的事情，对于一些有内容的边缘案例，它仍然会失败。它没有运行你的驼峰情况，但这很简单，可以打电话。

＆＃13;

var x = document.getElementById("x");
var str = x.getAttribute("style"); //x.style.cssText;
console.log(str);
var rules = str.split(/\s*;\s*/g).reduce( function (details, val) {
    if (val) {
      var parts = val.match(/^([^:]+)\s*:\s*(.+)/);
      details[parts[1]] = parts[2];
    } 
    return details;
}, {});
console.log(rules);

＆＃13;

div {
  font-family: Arial;
}

＆＃13;

<div style="color: red; background: yellow; background-image: url('http://domain.com/images/image.jpg');background-size: cover;padding: 100px 0;" id="x">test</div>

＆＃13;

Answer 3

你可以试试这个，在几个例子上测试：

styleObj={};
style=$('div').attr('style');
rules=style.split(';');
rules = rules.filter(function(x){
  return (x !== (undefined || ''));
}); // https://solidfoundationwebdev.com/blog/posts/remove-empty-elements-from-an-array-with-javascript



for (i=0;i<rules.length;i++) {

rules_arr=rules[i].split(/:(?!\/\/)/g); // split by : if not followed by //
rules_arr[1]=$.trim(rules_arr[1]).replace('url(','').replace(')','');

if(rules_arr[0].indexOf('-')>=0) {
rule=rules_arr[0].split('-');
rule=rule[0]+rule[1].charAt(0).toUpperCase()+rule[1].slice(1);
}
else {
rule=rules_arr[0];
}
styleObj[$.trim(rule)]=rules_arr[1];

}

console.log(styleObj);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="font-size: x-large; color: #ff9900; background-image: url('http://placehold.it/100x100');">Using inline style sheets - or is that inline styles?</div>

演示（更容易测试不同的内联样式）：https://jsfiddle.net/n0n4zt3f/2/

P.S。留下修剪和骆驼的情况......当然可以添加......

Javascript / jQuery将内联样式解析为每个对象

3 个答案: