附上超出其他標記的HTML標記的文本

Question

我想爲我的網站製作一個用於JavaScript語法高亮顯示的小型系統。

我的問題是，我找不到仍然突出顯示的文本。

一個小例子：

• 一個可能的輸入字符串：

<div class="keyword">for</div> 
 
(
 
<div class="keyword">var</div> 
 
i = 
 
<div class="num">0</div> 
 
; i < 
 
<div class="num">10</div> 
 
; i++){ app.food. 
 
<div class="keyword">fn</div> 
 
(); }

• 結果

<div class="keyword">for</div> 
 
<div class="other">(</div> 
 
<div class="keyword">var</div> 
 
<div class="other"> i =</div> 
 
<div class="num">0</div> 
 
<div class="other">; i < </div> 
 
<div class="num">10</div> 
 
<div class="other">; i++){ app.food.</div> 
 
<div class="keyword">fn</div> 
 
<div class="other">(); }</div>

誰能幫助我？謝謝！

Answer 1

與jQuery你可以包裝textNodes這樣的：

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

.other { 
 
    background: yellow; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="keyword">for</div> 
 
(
 
<div class="keyword">var</div> 
 
i = 
 
<div class="num">0</div> 
 
; i &lt; 
 
<div class="num">10</div> 
 
; i++){ app.food. 
 
<div class="keyword">fn</div> 
 
(); }