javascript - 如何从 CSS 文本中解析属性/值对
问题描述
如何提取 CSS 文本中存在的所有属性/值对
示例:来自这个 CSS
var cssText = "background-image:url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8\"); color:green; content:'(test)'";
我必须提取键/值对:
background-image => url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8")
color => green
content => "(test)"
我试过cssText.split(';')
了,但它不起作用,因为 base64 代码包含一个;
解决方案
你可以试试这个:
let element = document.createElement("div");
element.style = "background-image: url(\"data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8\"); color:green; content:'(test)'";
console.log([...element.style]);
for (name of element.style) console.log(name, ":", element.style[name]);
输出:
["background-image", "color", "content"]
background-image : url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8")
color : green
content : "(test)"
JSFiddle:https ://jsfiddle.net/vb9q1sot/
在当前的 Google Chrome、Firefox 和 Safari 上测试。需要测试浏览器兼容性,例如 MS Edge 或 Internet Explorer。
推荐阅读
- java - 无法在 Windows 中运行 PMD
- pdf - xsl:fo 在页面序列中增加一个变量?
- angular - 创建一个类以在角度 4 中保存所有自定义验证的正确方法
- c - Atmega16 的端口不工作
- laravel - 合并 Laravel 收集结果,聚合一个字段
- asp.net - django 应用程序中的 IIS 和 SQL Server Windows 身份验证
- uwp - UWP 中的 web 隔间是什么意思?
- java - 解决 Java 接口钻石问题
- c++ - 重定向输入和输出时如何处理main之外的文件I/O?
- javascript - Puppeteer 按 Enter 按钮或单击对话框 OK 按钮