javascript - 独立区域中的 HTML、CSS、JS 不影响整个网站

Question

我想在我的网站上发布教程。为了让用户看到一些示例，我想输出代码(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，我转义了代码标签内的必要字符，例如“<”，这样实际的代码就会作为文本打印出来，而不是像 HTML 那样被评估。

到目前为止没有问题。当涉及到“结果”部分时，我的问题就出现了，我实际上希望将编写的代码作为代码进行评估。到目前为止，我得到它与 jQuery 一起工作:取消转义 HTML 字符，将 css 内容放入标签中，将 JS 放入 标签中。现在的问题是"new"的 Css 和 JS 也将应用于网站的其余部分 <-- 绝对不是我想要的。但解决方案是什么？

我找到了一篇关于“scoped css”的文章:将您的 css 放在标签内将使 css 仅适用于父元素及其子元素。但是支持率很低，这只会帮助 CSS，而不是 JS。为我的示例代码提供一个 id 或类很简单，但对于我想放在那里的每个教程来说，这并不是我想要的东西，无论是为了写作还是为了阅读。

我需要将该教程代码包装在气泡中，与我网站的代码分开。有点像 iframe 之类的。如果对此有任何想法或意见，我将不胜感激。

提前致谢。

Answer 1

在我看来你正在努力实现 something like this .

var parent = $(".code-box.example-1"),
    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>");

如果这正是您要查找的内容并且您需要其他信息，请告诉我。关键是为您使用的每个代码示例添加一个类，此处为 .example-1。

对于一些正则表达式的解释，我建议您引用 regex101 .这是一个很棒的工具，在右侧窗口中对所有代码都有很好的解释。您可能知道，您可以使用 RegEx 进行匹配，也可以进行替换。在窗口底部的工具中，有“替换”。点击它，打开窗口。页面顶部的正则表达式将评估“测试字符串”，并用您在“替换”中的输入替换该字符串。结果在最底部的字段中。

CSS 替换:首先，让我们删除 CSS 注释和所有可能妨碍我们的空间字符(删除意味着“用空字符串替换”)-示例:https://regex101.com/r/cL0hL3/2

结果会是这样的:

div{
font-size: 120%;
}
div span{
font-size: 130%;
}

但是我们想让这个样式更加具体。我们希望它只应用于 .lang-result 内的 div，而后者又是父容器 .example-1 的一部分。因此我们需要在 CSS 中添加一些东西。一个有用的东西是美元符号 $1 ，它在替换中将返回捕获的组(在正则表达式中是在括号中)。 $1 返回第一个捕获的组，$2 返回第二个，依此类推。这是一个例子:https://regex101.com/r/cL0hL3/3 .结果将是我们想要的样子:

.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(类似于我们在 CSS 案例中所做的)。现在是展示捕获组功能的好时机(您可以在不使用三个组的情况下执行此操作，但这是说明其可能性的好方法:

我们替换这个

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

有了这个

$1.parent-class $2$3

了解 $1 是第一组 (\$\(")(字面意思是 $(", $2 是已经存在的选择器，$3 就是字面上的 ")。把它们放在一起，你就有了一个新的 jQuery 对象。

在此处查看实际效果。 https://regex101.com/r/cL0hL3/4

同样，在正则表达式中还有许多其他方法可以做到这一点，可能也更有效，但这是一个很好的展示。我没有详细介绍，但您可以将网站的右侧窗口作为正则表达式作用的解释。

---

如果你想将它应用到多个元素而不需要手动添加类，你可以这样做:http://jsfiddle.net/0c1np9uL/2/

$(".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>");
});