附上超出其他标记的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> 
 
(); }