Question

我需要解析复杂的CSS字符串，例如过滤器：

dropShadow(16px, 16px, 16px, rgba(50, 50, 100, 0.8)) invert(75%) blur(10px)

这应该分为三部分：

dropShadow(16px, 16px, 16px, rgba(50, 50, 100, 0.8)),
invert(75%),
blur(10px)

当然，字符串可以完全不同：

dropShadow(16px, 16px, 16px, #ffcc00),

处理这种Javascript中的CSS字符串混乱的最佳方法是什么？我知道类型对象模型可以轻松解决此问题，但采用方法还不很完善。

Answer 1

如@AngelPolitis在评论中所述：

查找括号中未包含的空格的索引，并使用substr或类似方法保存子字符串。对于像filter这样的属性，该属性接受以空格分隔的值，则应该这样做。对于以逗号分隔的值，只需在逗号处分割字符串即可。

以下是等效代码：

var parsedResponse = "dropShadow(16px, 16px, 16px, rgba(50, 50, 100, 0.8)) invert(75%) blur(10px)".replace(/\) /g, '),\n');

请在下面对其进行测试，并告诉我返回的值是否是您想要的值：

// Get the elements in DOM
var input = document.querySelector('input');
var output = document.getElementById('output');
var btn = document.querySelector('button');

btn.addEventListener('click', function() {
  var text = input.value;
  text = text.replace(/\) /g, '),\n');
  output.innerText = text;
});

<input type="text" placeholder="Place valid css property values here..." value="dropShadow(16px, 16px, 16px, rgba(50, 50, 100, 0.8)) invert(75%) blur(10px)"><button type="button">Output!</button>
<div id="output"></div>

解析复杂的CSS字符串

1 个答案: