Javascript拆分屬性到對象排除字符串

什麼是從字符串和對象分裂或提取CSS屬性的最佳方法？Javascript拆分屬性到對象排除字符串

var cssProperties = 'background:green;content:"Content;";color:pink;';

上面應該導致以下

var theObject = { 
    background:'green', 
    content:'"Content;"', 
    color:'pink' 
}

不幸的是我不能只使用一個分裂（「;」）通過陣列和循環由於在URL中的分號。我可以創造一個循環遍歷每個角色的巨大循環，同時跳過「;」只是用引號包裹，但似乎有點不對。

是否有這樣的正則表達技巧？

可選：也有任何真正好的正則表達式網站。我理解了大部分的語法，但是在我發現的大多數網站上似乎並沒有很多實際的複雜實例。

來源

2010-10-27 William

爲什麼你會預計有URL中的分號？ – Robusto 2010-10-27 23:23:51

我只是想盡可能使其失敗。 – William 2010-10-27 23:30:00

你可以把CSS放到一個新的DOM元素上，然後使用'.style'屬性來訪問它嗎？ – staticsan 2010-10-28 00:06:15

下面是一個小提琴進一步證明功能：http://jsfiddle.net/ZcEUL/

(function() { 
    var div = document.createElement('div'), 
     rprops =/[\w-]+(?=:)/g, 
     rcamelCase = /-(\D)/g, 
     fcamelCase = function(a,letter) { 
       return letter.toUpperCase(); 
      }; 
    window['styleToObject'] = function(str) { 
     var props = str.match(rprops), 
      prop, i = 0, 
      theObject = {}; 
     div.style.cssText = str; 
     while (prop = props[i++]) { 
      var style=div.style[prop.replace(rcamelCase,fcamelCase)]; 
      if (style) { 
       theObject[prop] = style; 
      } 
     } 
     return theObject; 
    }; 
})();

來源

2010-10-28 01:50:29 William

+1比我的解決方案好得多。雖然它在IE中無法獲得背景顏色，因爲它並不認爲它是一種風格。我更新你的小提琴駱駝套道具，它在鉻/ IE /歌劇/ FF/Safari的工作，但具有' - '的道具成爲駱駝基地... http://jsfiddle.net/subhaze/ACH9M/1/ – subhaze 2010-10-28 02:47:53

更新：保留對象的' - '：http://jsfiddle.net/subhaze/ACH9M/2/ – subhaze 2010-10-28 02:58:00

甜！我完全忘記了IE中的camelCase。儘管一個編輯。我們可以將div var移動到styleToObject函數中，或者我們需要刪除設置div = null。試試運行兩次styleToObject函數。它會通過第二次錯誤。 – William 2010-10-28 03:18:29

這是我就你列出的第一個css字符串所做的解決方案...不是最好的，但也許它會幫助引發一些想法。

JSFiddle Example

來源

2010-10-28 00:49:40 subhaze

試試這個或類似的東西

var newString = cssProperties 
        .replace(":", ":'") 
        .replace(";", ", '"); 
var obj = eval(newString);

來源

2010-10-28 00:54:49 Slappy

Javascript拆分屬性到對象排除字符串

回答

相關問題