JavaScript包裝解開明文

Question

我的網頁上有一些非靜態內容，我需要所有解開的純文本包裝在一個類的錨元素內，但是，我需要維護該文本的位置。

我在本網站上搜索，發現像these這樣的問題，它們詢問相同的問題，除非文本總是在開頭或結尾，答案總是將內容預加/附加回<div>。

爲了使問題更加複雜，有些情況下內容將只是未包裝的純文本，我也需要將其包裝。

我的HTML：

<div> 
    <a>1</a> 
    <a>2</a> 
    3 
    <a>4</a> 
</div> 

有時：

<div> 
    1 
</div> 

我已經嘗試了所有的答案上this一頁，但他們都重新排列文本。

任何想法？

Answer 1

遍歷元素的所有文本節點：

$('div').contents().filter(function() { 
    return this.nodeType === 3; 
}).wrap('<a class="awesomeClass"></a>'); 

DEMO

.contents()檢索元素的所有子節點，不僅是元素節點。

.filter回調會丟棄所有非文本節點的節點。它的工作原理如下：
每個DOM節點都有屬性nodeType，它指定了它的類型（有什麼意外）。這個值是一個常數。元素節點的值爲1，文本節點的值爲3。 .filter將從集合中刪除回調返回false的所有元素。

然後，每個文本節點被包裝在一個新元素中。

我有空白問題。

如果你的HTML看起來像

<div> 
    1 
</div> 

那麼元素有一個子節點，文本節點。文本節點的值不僅由可見字符組成，還由所有空白字符組成，例如，開始標籤後面的換行符。這裏它們由可見（​​是一個空間，¬是換行）：因此，¬⋅⋅1¬

<div>¬ 
⋅⋅1¬ 
</div> 

文本節點的值是。

來解決，這將是修剪的節點值，消除拖尾和前面的空白字符的一種方式：

$('div').contents().filter(function() { 
    return this.nodeType === 3; 
}).each(function() { 
    this.nodeValue = $.trim(this.nodeValue); 
}).wrap('<a class="awesomeClass"></a>'); 

DEMO