將實際的HTML元素添加到PRE/CODE內容

我試圖創建一個快速/髒方法來爲使用javascript的html中的pre/code標記添加一些語法高亮顯示。將實際的HTML元素添加到PRE/CODE內容

我遇到的問題是，如果我編輯文本（）或HTML（），我會得到逃脫的內容。也就是說，添加的標籤呈現爲前/代碼，或者我得到了一堆的簡易字符。

考慮下面的html：

<pre> 
    <code class="target"> 
    public interface __iIFoo { } 
    public class __tBar : __iIFoo { } 

    var list = new List__/__iIFoo\__(); 
    </code> 
</pre>

這裏的目標是，以取代__iIFoo出現：

<span class="interface">IFoo</span>

因此，它可以用CSS突出。當然，當它被渲染時，我不想看到實際的SPAN標籤。

這是我已經試過：

$(function(){ 
    var iPatt = /__i\w+/g 
    $.each($(".target").text().match(iPatt), function(i,match){ 
     var replace = '<span class="interface">'+match.substring(3)+'</span>'; 
     $(".target").text(function(){ 
      return $(this).text().replace(match, replace); 
     }); 
    }); 
});

這工作，但跨度標籤，我將在呈現的內容顯示如它們就像所有其他的預編碼一樣。我不想看到它！

來源

2013-08-02 Didaxis

更改html而不是文本。 – canon

如果使用'html（）'而不是'text（）'，那麼我最終會在轉義的內容中出現轉義字符，如< span class =「interface」>。我想要在pre元素中添加實際的DOM元素。 – Didaxis

不，'text（）'可以逃脫它......你已經倒過來了。 – canon

使用.html()而不是.text()。當您使用.text()時，該值是您希望用戶看到的文本文本，因此它會用實體替換特殊的HTML字符，以便它們按字面顯示。

來源

2013-08-02 04:59:09 Barmar

所有的答案基本相同，但是你是第一個。公正！ – Didaxis

DEMO

.text()對待值作爲文本和.html()呈現爲HTML內容

$(".target").html(function() { //replace text with html 
    return $(this).text().replace(match, replace); 
});

來源

2013-08-02 04:59:24

請嘗試使用html代替：

$(function(){ 
    var iPatt = /__i\w+/g 
    $.each($(".target").text().match(iPatt), function(i,match){ 
     var replace = '<span class="interface">'+match.substring(3)+'</span>'; 
     $(".target").html(function(){ 
      return $(this).text().replace(match, replace); 
     }); 
    }); 
});

來源

2013-08-02 05:01:09 sergioadh

正如我在我的評論，變化說html而不是文字（fiddle）。

作爲一個側面說明，每次遇到匹配時，您都完全覆蓋了.target的內容，這很令人擔憂。您應該利用RegExp capture groups並只執行一項任務。

(function() { 
    var iPattern = /__i(\w+)/g, 
     iTemplate = "<span class='interface'>$1</span>"; 

    $(".target").each(function() { 
     this.innerHTML = this.innerHTML.replace(iPattern, iTemplate); 
    }); 
})();

來源

2013-08-02 05:01:38 canon

將實際的HTML元素添加到PRE/CODE內容

回答

相關問題