Javascript 镜像HTML'；s CSS属性到代码镜像（插入新行）

小提琴-

今天我决定将一个html的css属性镜像到Codemirror，看看它是否可以呈现干净的css，而不是一行全部呈现

这是正在镜像到Codemirror的css

display: inherit; position: absolute; top: 20px; left: 19px; margin: 10px; width: 340px; height: 234px; padding: 1em; font-style: normal; font-variant: normal; font-weight: normal; font-size: 14px; font-family: arial; line-height: normal; color: rgb(255, 255, 255); border: 0px dashed rgb(0, 255, 255); border-top-left-radius: 0em; border-top-right-radius: 0em; border-bottom-right-radius: 0em; border-bottom-left-radius: 0em; background-color: rgb(0, 34, 102); text-shadow: rgb(255, 255, 255) 0px 0px 8px; overflow: visible; z-index: 0;

我正试图让它像这样展示

display: inherit; 
position: absolute; 
top: 20px; 
left: 19px; 
margin: 10px; 
width: 340px; 
height: 234px; 
padding: 1em; 
font-style: normal; 
font-variant: normal; 
font-weight: normal; 
font-size: 14px; 
font-family: arial; 
line-height: normal; 
color: rgb(255, 255, 255); 
border: 0px dashed rgb(0, 255, 255); 
border-top-left-radius: 0em; 
border-top-right-radius: 0em; 
border-bottom-right-radius: 0em; 
border-bottom-left-radius: 0em; 
background-color: rgb(0, 34, 102); 
text-shadow: rgb(255, 255, 255) 0px 0px 8px; 
overflow: visible; 
z-index: 0;

我知道这是可能的，我只是不知道该怎么做。我想找到

并将其替换为相同的字符，但在末尾添加换行符

非常感谢您的帮助

这是我的JQuery/JS

$('.div-style').val($('.box').attr('style'));

$('.code').each(function() {
    CodeMirror(this, {
        value: $('.div-style').val(),
        mode: 'text/css',
        lineNumbers: true,
        lineWrapping: true,
        readOnly: true
    });
});

将所有分号更改为分号后跟换行符的全局替换为：

$('.div-style').val().replace(/;/g,";\n")

尽管您会注意到，除了第一行之外，所有行的开头都留有空格，因为您的输入在每个分号后面都有空格：

因此，也许这是：

$('.div-style').val().replace(/;\s?/g,";\n")

演示：

或
/\s*/g
如果您想在每个分号后允许有任意数量的空格（包括零）。
那么\g是否像一个全局修饰符来替换匹配字符串的所有副本？（我知道\t是tab\n是新行，这就是为什么我想知道\g）是的，如果没有
g
，它将只替换第一行。请注意，它不是带有反斜杠的
\g
，而是在实际表达式的结束
/
（正斜杠）后作为标志的
g
。匹配的表达式是前斜杠之间的位，任何标志都位于第二个
/
之后。（您可以指定一些其他标志，例如，
i
表示“忽略大小写”。）