Question

我正在创建一个页面，您可以在其中输入HTML并将div中的输出显示在旁边代码：

＆＃13;

val (mapBefore, mapAfter) = (
  Map("a" -> "alpha", "b" -> "beta", "c" -> "gamma", "d" -> Map("e" -> "epsilon")),
  Map("a" -> "alpha", "b" -> List("beta"), "c" -> null, "d" -> Map("e" -> 3))
)

val (deltaBefore, deltaAfter) = getMapDiffs(mapBefore, mapAfter)
// deltaBefore: JsonMap = Map(b -> beta, c -> gamma, d -> Map(e -> epsilon))
// deltaAfter: JsonMap = Map(b -> List(beta), c -> null, d -> Map(e -> 3))

deltaBefore.toList
// List[(String, Any)] = List((b,beta), (c,gamma), (d,Map(e -> epsilon)))

＆＃13;

$("#tryit").keyup(function() {
  var input = $(this).val();
  $("#readout").html(input);
});

＆＃13;

#readout {
  height: 400px;
  width: 48%;
  border: 1px solid black;
  overflow: auto;
  float: right;
  clear: none;
  display: inline-block;
}
#tryit {
  height: 396px;
  width: 50%;
  float: left;
  clear: none;
  display: inline-block;
  font-family: monospace;
}

＆＃13;

它可以正常工作：它将HTML输出到<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <textarea name="tryit" id="tryit" rows="10"><!doctype html> <html> <head> <title>New Webpage</title> </head> <body> </body> </html> </textarea> <div id="readout"></div>。当用户在#readout中添加<style>标记时出现问题。然后添加的样式不仅会影响文本输入中的HTML，还会影响整个页面中的HTML 如何使CSS仅影响用户的输入，而不影响整个页面？
这是Problem Page。

Answer 1

在你的CSS中，它选择你的div输入与特定的id，然后选择其子元素：

<style>    
#readout input{
     color: red;
}
</style>

我添加了样式标记，因为您将css直接放在html编辑器中。上面的css只会影响div中的每个输入元素，其id为readout。

如果您正在寻找不同的东西，请说出来

Look at this fiddle

Answer 2

你应该考虑使用不同的方法来实现这一目标。

如果您真的想要使用目前为止所拥有的内容，则必须在textarea值中替换很多内容。只是为了给您一个想法，在下面的代码片段中，我只使用html（ #readout ）替换body和id样式声明，以应用样式为 #readout div，而不是页面的body。它适用于body，但所有其他可能的声明是什么？

当谈到正则表达式时，我确实是一个真正的菜鸟，我相信这可以做得更好，但所有这一切都没有必要。

＆＃13;

$("#tryit").keyup(function() {
    var style = $(this).val().match(/<style>(.*)<\/style>/);
    if (style !== null && style.length > 0) {
        var bodyReplace = style[1].replace(/(^|\s)(html)|(body)(\s|$)/ig, '#readout');
    }
  var input = $(this).val();
  $("#readout").html(input.replace(/<style>.*<\/style>/, '<style>'+bodyReplace+'</style>'));
});

$("#tryit").keyup();

＆＃13;

#readout {
  height: 400px;
  width: 48%;
  border: 1px solid black;
  overflow: auto;
  float: right;
  clear: none;
  display: inline-block;
}
#tryit {
  height: 396px;
  width: 50%;
  float: left;
  clear: none;
  display: inline-block;
  font-family: monospace;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea name="tryit" id="tryit" rows="10">&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;New Webpage&lt;/title&gt;<style>body {background: black; color: red }</style> &lt;/head&gt; &lt;body&gt;<h1>Hello</h1> &lt;/body&gt; &lt;/html&gt;
</textarea>
<div id="readout"></div>

＆＃13;

另一个问题是<doctype>中的<html>，<head>，<body>和textarea元素并不存在。看看来源，你会发现他们不在那里，他们不属于那里。话虽如此，我会选择 Barmar 的评论中提到的解决方案，他建议使用iframe。

实际上并不难实现。一种快速而肮脏的方法是从textarea blob创建value并将其添加到iframe的源属性中。通过为CSS添加另一个textarea并将其value作为样式表注入iframe的头部，这样可以轻松地分离HTML和CSS。由于沙箱安全问题，我无法在SO片段工具中使用iframe内容，因此请检查此

JSFIDDLE

我相信你会明白这个想法。

影响整个页面的HTML输入

2 个答案: