製作在JS

Question

正確的正則表達式模式我想實現一個正則表達式這種模式，但我不能成功，使其工作，我將它喜歡

var strInput = $("#inputFilter").val(); 
var pattern = new RegExp("(#[a-z0-9]{3,})|(@[a-zA-Z0-9]{6,16})|([a-zA-Z0-9]{6,16})(,((#[a-z0-9]{3,})|(@[a-zA-Z0-9]{6,16})|([a-zA-Z0-9]{6,16})))*"); 
var result = pattern.test(strInput); 
if (!result) 
{ 
    alert("Must follow this pattern, order is not relevant, e.g Title,#tag,@Username or Title,#tag,@Username,#tag2"); 
    return 
} 

---

標題由匹配模式[a-zA-Z0-9] {6,16}因此在這個例子中，它將是與模式匹配的詞HelloWorld

#tag與模式＃[a-z0-9] {3，}所以在這個例子中這將是#hello已經匹配的圖案

字

@用戶名與模式@ [a-zA-Z0-9] {6,16}相匹配，因此在這個例子中，它將是@MyUser這個與模式相匹配的詞

我想實現的是獲取輸入的匹配是這樣的：

的HelloWorld，＃標籤1，＃標籤2，＃標籤3，@名爲myUsername，＃onemoretag，＃andonemore

但順序並不重要，也像這樣將被罰款

個

＃標籤1，＃標籤2，＃標籤3，@名爲myUsername，＃TAG4，HelloWorld的

---

should match: 
#hello 
HelloWorld 
@username 
#hello,@MyUser,HelloWorld 
@MyUsername,HiWorld,#hello1,#hello2 

should NOT match: 
#@hello 
#hi 
@User 
@Username#hello 

感謝您的幫助

Answer 1

所以這更簡單的正則表達式匹配您的第一個提供的例子，但未能對一些後來者：

^([#@]?[a-zA-Z0-9]+)(,([#@]?[a-zA-Z0-9]+))*$ 

這不是特別複雜，但讓我們把它分解爲可讀性：

• ^ ... $ - 這些字符「錨」的正則表達式：他們確保其無法比擬的字符串中間的任何「浮動」的一部分，但必須在整個字符串相匹配。

• [#@]?[a-zA-Z0-9]+這兩個片形成的正則表達式的「肉」：第一個匹配#或@或沒有，和所述第二一個或多個字母數字字符之後它匹配。

• (...) (, (...))*匹配的東西，後面的零或更多的相同的東西，用逗號分隔。現在

---

，它看起來從原來的例子（並從額外的例子）要符合每個「單詞」專門的表格，而不是僅僅任何字母數字字符。這是不是太困難：相反的[#@]?[a-zA-Z0-9]+，你只是|人物混搭你想拼在一起。所以它看起來像這些都是你想要的基片：

• #[a-zA-Z0-9]{3,} - 一個標籤，三個或多個字母數字字符，由#之前。

• [a-zA-Z0-9]{6,16} - 標題，介於六到十六個字母數字字符之間。

• @[a-zA-Z0-9]{6,16} - 一個用戶名，就像一個標題，但前面有一個@符號。

由於標題和用戶名幾乎是一樣的，你可以讓@可選，合併的三種形式是這樣的：#[a-zA-Z0-9]{3,}|@?[a-zA-Z0-9]{6,16}

所以，在替代那些生成的代碼如下所示：

var regex = /^(#[a-zA-Z0-9]{3,}|@?[a-zA-Z0-9]{6,16})(,(#[a-zA-Z0-9]{3,}|@?[a-zA-Z0-9]{6,16}))*$/; 

不太難。

---

下面附上一個演示程序來說明它的工作原理。

var regex = /^(#[a-zA-Z0-9]{3,}|@?[a-zA-Z0-9]{6,16})(,(#[a-zA-Z0-9]{3,}|@?[a-zA-Z0-9]{6,16}))*$/; 
 

 
$(".text").on("keyup", function() { 
 
    var isMatch = regex.test(this.value); 
 
    $(".match").text(isMatch ? "match" : "not match"); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="text" class="text" /> 
 

 
<div class="match"></div>