将HTML标记的文本包含在其他标记之外

Question

我想在我的网站的javascript中为语法高亮显示一个小系统。

我的问题是我找不到仍然突出显示的文字。

一个小例子：

• 可能的输入字符串：

＆＃13;

＆＃13;

<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>
(); }

＆＃13;

＆＃13;

＆＃13;

• 结果

＆＃13;

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

任何人都可以帮助我吗？谢谢！

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>
(); }