如何修改我提到的擴展名以忽略已提及的元素？

Question

我寫了一個jQuery的擴展：

$.fn.mentionify = function() { 
    return this.each(function() { 
     var link = $(this); 
     link.html(link.html().replace(/(^|[^@\w])@(\w{1,30})\b/g, '$1<span class="mention">@$2</span>')); 
    }); 
} 

果然：

@username 

但不是：

name@website.com 

到：

<span class="mention">@username</span> 

但是，如果我跑它在一個元素上兩次，它將已存在的span包裝在另一個span標籤中。我如何檢查預先存在的span？

Answer 1

讓它測試一個正則表達式，看看跨度是否已經存在。

function() { 
    var link = $(this); 
    if(/<span/.test(link.html())) 
     return; 
    link.html(link.html().replace(/(^|[^@\w])@(\w{1,30})\b/g, '$1<span class="mention">@$2</span>')); 
} 

編輯：

好了，我終於明白你問什麼，你想要做什麼。然而，我並沒有想出一個答案。但我寧願不讓你空手而歸，所以我告訴你我經歷了什麼。希望這會有所幫助。

嘗試1

首先，你就需要改變你的正則表達式正確。但是單一表達式是不可能的。最初我的想法是檢查結束標記。這將匹配從<span>@test</span>@test2@test。

但是這不佔兩個跨度之間的@：<span></span>@test<span></span>。見最後一行https://regex101.com/r/zB3yI9/5。

要解決這個問題，您需要檢查之前的開始標記。但是它是一個嵌套的跨度......再次，這是同樣的問題。

嘗試2

我知道現在正則表達式模式是遠遠不夠複雜，本身。相反，您需要遞歸遍歷DOM，直到達到一個簡單可行的字符串。

我在jQuery中寫了一個小提琴來做這個。 http://jsfiddle.net/zf63hca2/

但我遇到了一個問題。 jQuery只能看到DOM對象，而不能看到它們周圍的流浪文本。

嘗試3

所以DOM幫不了你，它必須用正則表達式完成。困難的方式。我現在知道他們爲什麼警告我not to Regex HTML。我會寫代碼，但我的大腦即將融化。所以相反，這裏是步驟的細節。

1. 遞歸查找所有簡單表達式，將它們從字符串中移除。一個簡單的表達式是一個開放和閉合跨度，而不需要打開。
2. 繼續重複1直到沒有更多匹配。這將解決嵌套問題。
3. 你應該最終留下一堆沒有span標籤的字符串。
4. 匹配Twitter帳戶並進行替換。
5. 向後倒退，把整個事情放回去。

有一個正則表達式API可以簡化這個過程。 XRegExp支持chaining。優點是你也可以從每場比賽獲得開始和結束索引。

TL; DR

如果你真的想要得到這一切手段與DOM工作，然後，去了。但是到目前爲止，只要提供的字符串不包含DOM，它就可以構建多個Twitter鏈接。