如何突出顯示與正則表達式匹配的部分

我想突出（用紅色）輸入的錯誤部分（因此用戶可以很容易地找出錯誤的位置和內容）並將錯誤部分與正則表達式匹配。如何突出顯示與正則表達式匹配的部分

我試過類似如下：（說我接受字母而不是數字）

$("#myInputId") 
    .filter(function() { 
     return this.value.match(/[\d]/); 
    }) 
    .addClass("error")

但上面的代碼是突出整個輸入，但不是唯一的錯誤部分。

我只是把下面的圖片，讓我說的是更加清晰：

enter image description here

注意：我想做到這一點，不添加任何的jQuery插件突出顯示文本。

2011-11-24 siva636

所以，你要突出顯示的文字是：

<div id="myInputId">James<span class="error">1234</span></div>

您可以通過使用發現字符串，像這樣實現這一目標在文本輸入字段中（''）？ – Miikka

當然是的，在我的例子中，文本「James1234」，「James123Robert」在輸入字段（抱歉，我的圖像不夠完美，無法顯示） – siva636

我認爲這是因爲您正在向其中包含所有文本「James1234」的元素添加類「錯誤」。

此刻，我覺得這樣的事情正在發生

<p class="error"> 
    james1234 
</p>

，如果它是免費的文字和你沒有替換文本，改變了HTML來像這樣

<p> 
    james<span class="error"/>1234<span/> 
</p>

所以要實現這個我認爲你需要做這樣的事情

var searchterm = '1234' 
    value.replace(searchTerm, "<span class='error'/>" + searchterm + "<span/>");

2011-11-24 08:56:47 RockThunder

如果我更改用戶輸入，當用戶提交輸入？ – siva636

如果您試圖突出顯示輸入字段中的錯誤，那麼您可以嘗試這些事情1）在輸入字段旁邊添加顯示錯誤文本的標籤2）當用戶點擊提交時，在並在返回服務器的路上將其除去 – RockThunder

過濾功能ret因爲this.value中的內容與所需的正則表達式匹配，因此它是真實的。因此整個元素#myInputId都可以。對於這個元素，你應用error類。

您只需將該類應用於相關部分。你應該做的，就是用#myInputId替換找到的字符串，並在同一個字符串中只包含一個錯誤範圍。

此：

<div id="myInputId">James1234</div>

變爲這樣：

var newStr = wholeStr.replace(foundStr, '<span class="error">'+foundStr+'</span>');

2011-11-24 08:57:21 MeLight

如果我更改了用戶輸入，當用戶提交輸入時會發生不好的事情？ – siva636

我不確定我是否理解你的意思 – MeLight

如果用戶輸入改變了，必須在提交表單時執行反作用（雙工） – siva636

回答