如何将网页文本框中的HTML和CSS呈现为

实际上，我正在尝试创建一个JSFIDLE的迷你克隆

也就是说，我希望允许我的用户键入一些HTML和CSS，并在屏幕的另一个区域中查看渲染结果。我也希望使用AngularJS

---

有人对此有什么建议或经验吗？

您可以使用提供的CSS和HTML创建一个临时文件，然后使用框架在页面的另一部分查看该文件

我不确定您知道/想要使用多少Javascript，但您可以为HTML、CSS和输出创建3个框架。在HTML和CSS框架中，放置一个输入文本区域。然后在“运行”按钮上单击，将输出的内部HTML更改为HTML内容（在HTML标记内）和css内容（在样式标记内）。

（在进行角度编辑之前，我起草了这篇文章，但您可以将jQuery与角度一起使用。）

如果您稍微小心一点，可以在单个页面内完成此操作：

一个页面上只能有一个

body

标记。因此，任何

body

样式都应该只应用于容器，而不是文档体。下面的代码通过将

body

标记样式更改为

.body

类样式来处理此问题，该样式适用于包含class

body

的容器中的

div

任何其他样式也应仅应用于容器的子级。下面的代码首先将“样式表”文本区域附加到容器中，然后遍历样式规则，并将容器的ID预先添加到每个选择器中，从而处理此问题。（将删除原始规则并插入新规则。）

下面的代码适用于IE9+和现代浏览器

---

$（'div'）.first（）
.keyup（函数（）{
$（'#Render'）.html(
'+$（'div:first textarea:not（：first'）.val（）+'+
'+$（'div:first textarea:first'）.val（）+'
);
var ss=document.styleSheets[document.styleSheets.length-1]，
规则=ss.cssRules；
对于（var i=0；i

谢谢-回答得太好了。很抱歉在开头没有包括角度部分。尽管如此，这确实很有帮助

<div>
  <textarea placeholder="Enter HTML here"></textarea>
  <textarea placeholder="Enter CSS here"> </textarea>
</div>

<div id="Render"></div>

$('div').first()
  .keyup(function() {
    $('#Render').html(
      '<style>'+$('div:first textarea:not(:first)').val()+'</style>'+
      '<div class="body">'+$('div:first textarea:first').val()+'</div>'
    );
    var ss= document.styleSheets[document.styleSheets.length-1],
        rules= ss.cssRules;
    for(var i = 0 ; i < rules.length ; i++) {
      var rule= '#Render '+rules[i].selectorText
                .replace('body','.body')
                .split(',').join(', #Render')+
                '{'+rules[i].cssText.split('{')[1];
      ss.deleteRule(i);
      ss.insertRule(rule, i);
    }      
  })
  .keyup();