全局替换/字符

Question

小提琴 - http://codepen.io/mikethedj4/pen/BCJun

我一直在为我的平板电脑的网站设计师工作，它几乎准备发布，但我有一个问题。

您可以看到，在我调整样式属性以获得一个不错的视觉样式时，浏览器会将元素的css修改添加到样式属性中。我相信大多数人都知道。

我已经能够通过将整个画布的html镜像到另一个div并删除该div中的样式来删除style属性，这样我的设计区域/画布仍可按预期工作。

我想要做的就是抓住它并将其镜像到文本区域，同时抓住它的所有孩子。你可以在我Codepen的小提琴里看到你。我的问题是如何在屏幕截图中显示它时如何抓住所有孩子的css。

修改：
我最初尝试过这个，但它只会抓住第一个元素......

$('.preview').children().prop("tagName").toLowerCase() + '.' + $('.preview').children().prop("className") + ' {\n ' + 
$('.preview').children().attr('style').replace(/;/g,";\n") + '}'

最近我试了一下......

$('.hidden-preview').html($('.preview').html());
$('.hidden-preview').children("*").html("");
$(".hidden-preview *").removeAttr('contenteditable');
$(".code").val($(".hidden-preview").html().replace(/>/g,'').replace(/</g,'').replace(/style="/g,'{\n ').replace(/class="/g,'.').replace(/"/g,'').replace(/;/g,';\n') + "}\n\n");

它似乎工作得最好，但我无法删除/关闭我尝试添加结束css括号}的元素。

示例......

.replace(/ //g,'}')

非常感谢任何帮助。

Answer 1

.replace(/ //g,'}')无效，导致/需要在正则表达式中进行转义：

.replace(/ \//g, '}')

Answer 2

您需要进行一些修改： 摆脱结束标签＆＃39;开场括号：

.replace(/<\/?/g,'') 

\/?是可选的（并已转义）/

使用它来提取样式：

.replace(/style="([^"]+)"/g,'{\n $1 } ')

这会捕获任何非"字符并通过\ 1引用它，以便style="foo"成为{\nfoo}

取消"的替换以及}的追加

（我实际上已经更新了你的小提琴）