如何使用JavaScript將CSS轉換為XML？

Question

我想像這樣轉換一些CSS：

body {
    margin: 0 auto;
    padding: 10px 0;
}

#content {
    background: #ffffff;
}

變成這樣的XML結構：

<class name='body'>
<param name='margin'>0</param>
<param name='padding'>10px</param>
</class>

<class name='#content'>
<param name='background'>#ffffff</param>
</class>

我想將CSS放在textarea然后將其轉換為第二個textarea 。 這可能嗎？

我的想法是將代碼分成一個數組。 具有數組的每個類或id的屬性：

array [0][0][0] = body
array [0][1][0] = margin
array [0][1][1] = 0
array [0][2][0] = padding
array [0][2][1] = 10px 0
array [1][0][0] = #content
array [1][1][0] = background
array [1][1][1] = #ffffff

Answer 1

實際上，您要找的代碼很容易找到，但是可能您只是在搜索錯誤的東西。

我會與您共享我的代碼，但是它的編寫形式看起來像是最小化的代碼，雖然允許我將整個框架塞入頂針而不最小化，但對於那些不想嫁給它的人來說卻有些混亂。 盡管能夠用4-5次擊鍵進行書寫，否則20或40會使它成為一個真正有趣的約會。

我有一段代碼可以讓我使用CSS，而無需打擾瀏覽器前綴，因為它可以隨時處理這些內容，但是有些東西，例如Modernizer和其他甚至更多的CSS專用工具也可以執行類似的任務，其源代碼可能很容易掠奪您需要的解析器。

我確實從我的一個較舊的不太緊湊的版本中獲得了一點幫助，這可能會對您有所幫助。 正則表達式是將CSS分解為屬性和值的一部分，盡管有些陳舊仍然有用。

for循環的主體具有某些依賴性，但實際上只是為了讓您了解如何使用舊的正則表達式。 新的代碼沒有什么不同，但是代碼太緊了，幾乎不可能從中提取類似的樣本。 來想一想，循環的整個部分都歸結為比該循環小的部分。

RegExp(/(?:(?:[{;]{1,1})(?:[$]{0,})(?:[\s$\n\t]{0,}){0,})([-a-z]{1,1}[-a-z_0-9]{1,}?)(?=[ \t]{0,}[:])/gim)


for(;(a_prop=rx.rx_props.exec(s_textContent));)
{var    prop_in=(a_prop||[null,null])[1],prop_out=_.vcss$(prop_in,'-');
if(prop_in!=prop_out)
    {s_textContent=s_textContent.substr(0,rx.rx_props.lastIndex-    prop_in.length)+prop_out+s_textContent.substr(rx.rx_props.lastIndex);
        }
}

Answer 2

恕我直言，將其轉換為以下XML更有意義。

<style>
  <body margin="0 auto" padding="10px 0"/>
  <any id="content" background="#ffffff"/>
</style>

請注意，如何將屬性id和class （在您的示例中不是）與其他屬性區別對待。 注意新的標記名any 。 最后，請注意嵌套CSS樣式，例如

table.a td {border:thin solid black; margin:1px}

自然地轉換為子節點。

<table class="a">
  <td border="thin solid black" margin="1px"/>
</table>

如何使用JavaScript將CSS轉換為XML？

問題描述

2 個解決方案

解決方案1
0 2013-05-11 04:10:51

解決方案2
0 2018-06-10 03:33:23

如何使用JavaScript將CSS轉換為XML？

問題描述

2 個解決方案

解決方案1 0 2013-05-11 04:10:51

解決方案2 0 2018-06-10 03:33:23

解決方案1
0 2013-05-11 04:10:51

解決方案2
0 2018-06-10 03:33:23