如何將字符串中的HTML實體轉換爲HTML？

Question

我傳遞到JavaScript函數字符串：

<div>Peter</div><div>Paul</div><div>Jane</div> 

，當我在javascript絕版此代碼，輸出是這樣的：

<div>Peter</div><div>Paul</div><div>Jane</div> 

但我需要把它改造成這樣：

Peter 
Paul 
Jane 

執行HTML代碼。

如何在javascript/jQuery中做到這一點？

謝謝

Answer 1

您需要剝去標籤

string.replace(/(<([^>]+)>)/ig,"");

Answer 2

下面是使用DOM操作代替正則表達式的例子。

我們首先創建一個「沙箱」元素並插入我們的HTML字符串。通過使用innerHTML插入它，字符串轉換成DOM對象。

var str = '<div>Peter</div><div>Paul</div><div>Jane</div>'; 
var sandbox = document.createElement('div'); 
sandbox.innerHTML = str; 

現在從DOM對象獲得字符串的內容：

var items = [].slice.call(sandbox.children).map(function(el) { 
    return el.textContent; 
}); 

//=> ["Peter", "Paul", "Jane"] 

現在你可以做任何你想做這個字符串數組。例如：

items.join('\n'); 
// "Peter 
// Paul 
// Jane" 

Answer 3

首先，這個問題似乎是有些誤導，因爲你的HTML字符串可以打印出一個堆疊在瀏覽器頂部的三個名字：

Peter 
Paul 
Jane 

因爲幕後的你有三個名字包含在三個div中，彼此堆疊在一起。

<div>Peter</div> 
<div>Paul</div> 
<div>Jane</div> 

此外，它似乎有點像你問「如何將此HTML字符串轉換爲HTML？」所以我假設你是真的要求，是如何從html字符串中去掉html標籤，並且在沒有HTML的情況下將名稱打印在彼此之上？

您可以嘗試同樣的想法，這些變化：

// Replace div tags with Empty Spaces 
var htmlString2 = "<div>Peter</div><div>Paul</div><div>Jane</div>"; 
var noHtmlString = htmlString2.replace(/(<([^>]+)>)/ig," "); 
// Peter Paul Jane 

// Split values into an array, then process them however you want 
var htmlString3 = "<div>Peter</div><div>Paul</div><div>Jane</div>"; 
var array = htmlString3.replace(/(<([^>]+)>)/ig," ").split(" "); 
// ["", "Peter", "", "Paul", "", "Jane", ""] 

// Turn your closing div tags into line breaks (remove opening tags) 
var htmlString4 = "<div>Peter</div><div>Paul</div><div>Jane</div>"; 
var lineBreaks = htmlString4.replace(/<div>/ig, "").replace(/<\/div>/ig, "\n"); 
/* 

Peter 
Paul 
Jane 

*/ 

該名單上的最後一個選項是強制非HTML字符串打印換行符的一種方式，它做什麼，是替代<div>代碼與一個空的空間，並關閉div標籤</div>與斷行字符\n，將創建此字符串：

Peter 
    Paul 
    Jane 

但這些換行符字符僅在可識別它們的設置中呈現，因此您可以修改腳本以用任何強制換行來獲取所需格式的內容替換結束標記。另外，該示例中的正則表達式僅支持div標籤，如果您想支持更多的html標籤，則必須構建更強大的正則表達式。

最後，您可能已經注意到上述某些解決方案在文本值之前或之間留下空白空間。在構建處理選擇時，這是需要考慮的事情。

不知道這是你在找什麼？

Here is the jsfiddle I used to test this answer.

希望這有助於！