單獨區域中的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放入 標簽。 現在的問題是，“新” Css和JS也將適用於網站的其余部分<-絕對不是我想要的。 但是，解決方案是什么？

我找到了一篇有關“作用域CSS”的文章：將CSS放入標簽中將使CSS僅適用於父元素及其子元素。 但是支持很低，這只會幫助CSS，而不會幫助JS。 給我的示例代碼一個id或一個類很簡單，但是對於我想在那里寫的每個教程來說，這都不是可取的，無論是寫作還是閱讀。

我需要將該教程代碼包裝在氣泡中，與我的網站代碼分開。 有點像iframe等。 我真的很感激對此的任何想法或意見。

提前致謝。

Answer 1

更具體地說明您的選擇，而不是讓$("div")使用$("#result div") ，這也是您可以使用jQuery而不是將其包裝的一件好事，您可以使用if ： if($("#result div").attr("on") == "on") {//do stuff}

Answer 2

您可以使用textarea來顯示您的代碼。 至於“結果”部分，iframe可能是您最好的選擇。

 .code{ border:0; resize: none; height:100px; width:300px; overflow:hidden; } 

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

Answer 3

在我看來，您正在嘗試實現這樣的目標 。

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，而該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>");
});