在JavaScript中使用RegEx解析CSS字符串

我一直在試圖拼湊一個簡單的正則表達式和谷歌搜索的最後一個小時，但我似乎無法找到適合我的東西。我正在尋找一個簡單的輸入字符串，比如說「.cSSRule {value：'foo';}」，並將其分成一個看起來像這樣的數組：「[cssRule：value]」，其中規則的名稱是關鍵字而實際的規則是價值。我不是在尋找一個完整的解析器（儘管我知道它們存在），因爲這對於我正在使用的簡單字符串來說是過分的。有人會指出我的方向正確嗎？在JavaScript中使用RegEx解析CSS字符串

感謝，

藍光

來源

2010-12-10 Blu Dragon

不回答你的問題，但到什麼程度，你可以控制的過程？可能是將CSS樣式實際應用於文檔並解析實際計算值的選項？它可能不適用於你的情況，但這將是最簡單的方法 – 2010-12-10 19:23:29

我不太確定我明白你在問什麼。這實際上是針對insertRule/addRule的簡單包裝。該函數採用與insertRule相同的參數，但由於addRule完全不同，我需要將其分解。爲什麼微軟必須讓每個開發人員的生活變得活生生的？ – 2010-12-11 05:40:17

這應該做到這一點：

var str = ".cssRule { value: 'foo'; }"; 
var someObject = new Object; 
var matches = str.match(/^\.(.*?){(.*?)}/); 
someObject[matches[1].replace(/ /g,'')] = matches[2].replace(/ /g,'');

「匹配」成爲包含三個元素的數組：第一（索引0）是什麼它匹配對完整的字符串;第二個（索引1）匹配句點和大括號之間的所有內容，第三個（索引2）匹配大括號之間的所有內容。

來源

2010-12-11 10:34:05

這看起來會滿足我的需求。但有一個更正：「someArray」應該是「someObject」。 – 2010-12-12 18:48:42

我不得不作出一點改變，以便處理更復雜的規則和基本規則：我刪除了「\」。來自RegEx。再次感謝您的傑出幫助！ – 2010-12-12 19:01:45

抱歉有關錯誤（我已經糾正它爲未來的用戶）...很高興我可以幫助。 – 2010-12-16 08:53:02

在這種情況下，像

var str = ".cssRule { value: 'foo'; }"; 
someArray.push( 
    ((str.replace(/\.|}|;/g,'')) 
     .split(/{/) 
     .join(':"') 
     .replace(/\s/g,'') 
     .replace(/.$/,'"') 
    ); 
    /* =>"[cssRule:"value:'foo'"] */

會工作。我不認爲這是非常通用的。

來源

2010-12-10 20:25:29 KooiInc

謝謝！我會看看如果這符合我的需求。 – 2010-12-11 05:36:20

你的代碼中有一個額外的paren（ – 2010-12-11 05:54:25

）你的代碼去掉了「。」，「;」和「：」字符。（「[cssRule：[values]」）我應該在OP中做得更清楚一些，下面是我修改後的代碼：「rule.replace（/}/g，」「））。split（/ {/）。join（」：\「」）。replace（/.$/，「\」「）」 – 2010-12-11 06:06:26

輸入字符串從哪裏來？如果它是一個安全的來源（即不是來自用戶），只需使用正則表達式去除.cSSrule部分和eval()剩下的部分 - 您可以爲您分析並創建完整的關聯數組。

編輯：你需要更換;與,爲好，除了最後一個實例：

input 
    .replace(/^(.*)(?={)/, '') 
    .replace(/;(?!(\s)*?})/g, ',') 
    .replace(';', ''); 
myCss = eval(input);

來源

2010-12-11 12:03:24

是源是安全的，因爲它來自代碼中指定的字符串。我會看看你的解決方案以及羅布的。非常感謝你們！ – 2010-12-12 17:48:04

我的代碼沒有太大的運氣。 IE的JS調試器不斷吐出一個錯誤，說有一個失蹤的「;」。 – 2010-12-12 18:47:34

在JavaScript中使用RegEx解析CSS字符串

回答

相關問題