JavaScript/jQuery正則表達式用有效字符替換輸入字段

我正在構建一個CMS，用戶可以通過文本輸入控件自定義頁面的SEO URL。例如，假設用戶正在創建一個圖庫，並且他們希望在http://www.theirsite.com/my-1st-gallery訪問他們的頁面。JavaScript/jQuery正則表達式用有效字符替換輸入字段

請注意，「my-1st-gallery」部分不包含URL的任何非法字符。由於大多數用戶不知道什麼是允許的和不允許的，我想創建一個JavaScript正則表達式過濾器，它可以過濾/轉換所有非法字符。

我知道如何使用jQuery/JavaScript來監聽鍵起事件，但我不知道如何使用正則表達式來做到以下幾點：

過濾比包括AZ，az其他所有字符，0-9，「 - 」，「_」和空格。
將任何「_」和空格更改爲「 - 」，並讓用戶知道給定字符已轉換爲「 - 」。

有人可以提供一個如何做正則表達式部分的好例子。我再次瞭解如何傾聽關鍵事件。

謝謝你的時間！

好吧，所有這些很好的答案，我想我可以把它拼湊在一起，爲我的網絡應用程序。我希望我可以選擇多個答案作爲我的最終！：S謝謝大家！

來源

2011-07-03 Oliver Spryn

$("#inputElement").keyup(function() { 
    var input = $(this), 
    var text = input.val().replace(/[^a-zA-Z0-9-_\s]/g, ""); 
    if(/_|\s/.test(text)) { 
     text = text.replace(/_|\s/g, ""); 
     // logic to notify user of replacement 
    } 
    input.val(text); 
});

來源

2011-07-03 20:56:05 jdc0589

是的，除a-z，A-Z，0-9，a「 - 」，a「_」以外的所有其他字符都將被忽略。此外，「_」和一個空格將被轉換爲「 - 」，並且它會讓用戶知道何時發生了此操作。 –

爲什麼這會被拒絕？ – 2011-07-03 21:10:13

好問題，不確定。 –

這將篩選（1）中的字符：

/[^a-zA-Z0-9\-_ ]/g

的/是在JavaScript中的正則表達式的分隔符。該[]劃定一個字符類，以及^內的字符類的的意思是「匹配所有字符不包含這個類裏面」。然後你可以在類中指定單個字符（比如「 - 」和「_」），或者指定一個範圍（比如「a-z」）。

分隔符外部的g用作「全局搜索」的標誌，這只是表示正則表達式匹配不止一次，否則它將在第一次匹配時停止，然後停止搜索。 \用作轉義字符，我用它來轉義字符類中的連字符，因爲它用作字符類內的元字符來指定字符範圍。

我真的不確定這是否有必要，因爲我沒有在Java，PHP和Mozilla JavaScript正則表達式文檔中發現任何表示連字符需要像這樣轉義的東西，而我在Firefox 5和Chrome中的測試12表明它可以工作。

你可以閱讀更多關於JavaScript regex at the Mozilla docs，並在http://regexpal.com/測試你的正則表達式。

來源

2011-07-03 20:57:11

哇，謝謝你的詳細解答Keoki！ –

需要逃避角色類中的那個破折號。 – ridgerunner

@ridgerunner我嘗試了兩種方式，都工作，''http://www.theirsite.com/my-1st-gallery「.match（/ [0-9 - ]/g）;'，'」http ：//www.theirsite.com/my-1st-gallery」 .match（/ [0-9 \ - ] /克）;'。我已經檢查了PHP，Java和Mozilla JavaScript的正則表達式文檔，並且他們都沒有說你必須在字符類中跳過連字符。有沒有一個你知道的說法，否則呢？ – 2011-07-03 23:53:32

正則表達式刪除比你指定什麼其他的所有字符是允許的，然後替換「_」和「」與「 - 」：

var inputVal = $('input.myField').val(); 
var newVal = inputVal.replace(/[^A-Za-z0-9\-_\s]/g, '').replace(/[_\s]/g, '-'); 
if (newVal != inputVal) { 
    alert('We modified something!'); 
    // Do some more things... 
} 
$('input.myField').val(newVal);

來源

2011-07-03 20:59:01 jerluc

哦！太好了！我想補充的唯一的事情是當後一個正則表達式被觸發時的事件監聽器。那可能嗎？ –

如果這是指能夠告訴用戶他們的輸入是否已被修改的要求，則不要擔心這種複雜性。我會在我的文章中添加一些額外的代碼。 – jerluc

你可以做這樣的事情（asuming你有字符儲存在key變量中）

if(key.test(/[_\s]/)){ 
    key = "-"; 
    alert("key changed to -"); 
} 
if(!key.test(/[a-zA-Z0-9\-]/g){ 
    key = ""; 
    alert("Invalid key"); 
}

希望能對你有所幫助。乾杯

來源

2011-07-03 21:03:57

我使用這個插件jQuery：http://www.thimbleopensource.com/tutorials-snippets/jquery-plugin-filter-text-input。

來源

2014-09-08 13:09:20

JavaScript/jQuery正則表達式用有效字符替換輸入字段

回答

相關問題