Javascript HTML、CSS、JS在单独的区域，不影响整个网站

我想在我的网站上发布教程。为了让用户看到一些示例，我想输出代码HTML、CSS、JavaScript以及结果

因此，我的代码框标记（包括一个小示例）如下所示：

<div class="code-box">
    <code class="code-section lang-html">
        <!-- Example HTML code -->
        <div> <span>This</span> is an example </div>
    </code>
    <code class="code-section lang-css">
        /* Example CSS code */
        div{
            font-size: 120%;
        }
        div span{
            font-size: 130%;
        }
    </code>
   <code class="code-section lang-js">
       /* Example jQuery code */
       $("div").hover(function(){
           $(this).find("span").css("fontSize", "140%");
       }, function(){
           $(this).find("span").css("fontSize", "130%");
       });
    </code>
   <code class="code-section lang-result">
       <!-- Example result -->
   </code>
</div>

---

通过JavaScript/jQuery，我转义了一些必要的字符，比如，对您的选择更加具体，而不是让$div使用$result div，这也是一件很好的事情，您可以使用jQuery而不是包装它，如果是这样的话：如果$result div.attron==on{//do stuff}

您可以使用文本区域来显示代码。至于结果部分，iframe可能是您最好的选择

.代码{ 边界：0； 调整大小：无； 高度：100px； 宽度：300px； 溢出：隐藏； } 这是一个例子 /*CSS代码示例*/ div{ 字体大小：120%； } 分区跨度{ 字体大小：130%； } /*jQuery代码示例*/ $div.hover函数{ $this.findspan.cssfontSize，140%； }，功能{ $this.findspan.cssfontSize，130%； };

---

在我看来，你正在努力实现

但我们想让这种风格更具体。我们希望它只应用于.lang result中的div，而该div又是父容器的一部分。示例1。因此，我们需要在CSS中添加一些东西。使用美元符号$1是一件有用的事情，作为替换，它将返回捕获的组，正则表达式中的组位于括号中$1返回第一个捕获的组，$2返回第二个组，依此类推。下面是一个例子：。结果将显示我们想要的结果：

.parent-class .lang-result div{
font-size: 120%;
}
.parent-class .lang-result div span{
font-size: 130%;
}

JS替换：第一部分与CSS正则表达式相同：删除注释不适用于//注释，仅适用于/*…*/。这将导致：

$("div").hover(function(){
$(this).find("span").css("fontSize", "140%");
}, function(){
$(this).find("span").css("fontSize", "130%");
});

然后我们必须将基础选择器div（结果中唯一的div）smilar更改为我们在CSS中所做的。这是一个展示捕获组功能的好时机。您可以不用使用三个组来完成此操作，但这是说明其可能性的一个好方法：

我们替换这个

(\$\(")([^"]+)("\))

用这个

$1.parent-class $2$3

了解$1是第一组\$\字面上是$，$2是已经存在的选择器，而$3是字面上的选择器，这一点至关重要。把这些放在一起，就有了一个新的jQuery对象

在这里看到它的作用

同样，在regex中还有许多其他方法可以做到这一点，可能效率也更高，但这是一个很好的展示。我没有讲太多细节，但是你可以在网站的右边窗口解释正则表达式的作用

如果要在不手动添加类的情况下将其应用于多个元素，可以这样做：

---

@BramVanroy是的，我知道它已经被弃用了，但它仍然受到所有浏览器的支持……很抱歉，我对正则表达式一无所知。您能解释一下代码中每个re都发生了什么，或者添加一些注释吗？一旦我知道我可以将其应用到我的案例中。@DeadManWalker查看我的编辑。如果有帮助，请投票支持。如果它解决了你的问题或回答了你的问题，请勾选接受它作为答案。好的，非常好，我非常感谢。你完全按照我的想法做了。尽管这是目前为止最好的解决方案，但您能想象一种不需要我为每个教程父div添加id或不同类的方法吗？@DeadManWalker在循环中，您可以为jQuery中的每个元素添加一个唯一类，然后应用函数，如下所示：。

(\$\(")([^"]+)("\))

$1.parent-class $2$3

$(".code-box").each(function () {
    var parent = $(this);
    parent.addClass("example-" + parent.index());

    var parentC = parent.attr("class").match(/example-\d+/),
        htmlSnip = parent.find(".lang-html > pre").text().replace("&lt;", "<").replace("&gt;", ">"),
        cssSnip = parent.find(".lang-css > pre").html().replace(/(\/\*.*\*\/\n)|(^\s*)/gm, "").replace(/^([^{\n]+)(?={$)/gm, "." + parentC + " .lang-result " + "$1"),
        jsSnip = parent.find(".lang-js > pre").html().replace(/(\/\*.*\*\/\n)|(^\s*)/gm, "").replace(/(\$\(")([^"]+)("\))/gm, "$1." + parentC + " .lang-result " + "$2 $3");

    parent.find(".lang-result").html(htmlSnip).prepend("<style>" + cssSnip + "</style>" + "<script>" + jsSnip + "<\/script>");
});