2013-05-20 109 views
2

使用JavaScript,我需要解析一個頁面的HTML,並用內容塊中發生的ABC代替所有出現的ABC,例如<p>ABC Company lorem ipsum</p>將更改爲<p><span class="abc">ABC</span> Company lorem ipsum</p>,但mailto:[email protected]將保持不變。自定義正則表達式需要

所以幾乎可以用空格或引號替換ABC,但顯然我想使它更通用一些。也許表達式會在不是之前/之後是[a-zA-z]

我有什麼至今:

<script type="text/javascript"> 
    $(document).ready(function() { 
     $('body').find('div').each(function(i, v) { 
      h = $(v).html(); 

      if (h.indexOf('abc') > 0) { 
       h = h.replace('abc', '<span class="abc">abc</span>'); 
       $(v).html(h); 
      } 
     }); 
    }); 
</script> 
+3

萬一這一點不明確,做代替這種方式會導致這些div內的所有存儲數據和綁定事件丟失。 –

+0

啊,我覺得這個實現有一些可怕的錯誤,因爲它花了5分鐘纔出現。 –

+0

這應該讓你成爲那裏的一部分:http://jsfiddle.net/hrEyC/實際上將不得不從節點導航到最接近的父元素並修改該元素的文本內容。 –

回答

1

我建議去它仍然能保持元素的數據和事件,並且不與所述元件屬性干擾的方式不同。

$("body div").find("*").addBack().contents().filter(function(){ 
    return this.nodeType === 3; 
}).each(function() { 
    $(this).parent().html(this.nodeValue.replace(/abc/g, '<span class="abc">abc</span>')); 
}) 

http://jsfiddle.net/hrEyC/1/

注意,需要jQuery的1.9+由於使用的.addBack(),舊版本與.andSelf()

+0

替換邏輯要堅實得多,但是正則表達式替代了所有的邏輯。我需要排除可能在電子郵件地址(或類似情況)中的實例。 –

+0

你是否也想用'foo abc bar'代替'fooabcbar'?如果您還想確保它不會在電子郵件地址中進行替換,那麼這會非常困難。 –

+0

如果abc被其他字母包圍,則它很可能不會被替換。大多數情況下只是

Blah abc

Blah「abc blah」

1

更換這是不是在做(遍歷所有div標籤的非常有效的事情DOM並對每一個應用正則表達式),但由於我不知道你有什麼約束或者你在使用這段代碼的情況,我只是假設你在這個客戶端做這件事是有很好的理由的辦法。

無論如何,這正則表達式似乎符合您的需求(儘管不是很明確的要求):

h = h.replace(/([^A-Z])(ABC)([^A-Z])/gi, '$1<span style="color: red">$2</span>$3'); 

小提琴這裏:http://jsfiddle.net/czJFG/