带有哈希标记的RegEx问题 [英] RegEx issue with hash tag

查看:91
本文介绍了带有哈希标记的RegEx问题的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我试图匹配哈希标签并用锚标签包装它们。
这是POC:

 < p class =display>< / p> 



  var content =I像#redApple,我有#黑帽子,#red是我最喜欢的颜色。 

var re = /(#[a-z0-9] [a-z0-9\ -_] *)/ ig,
match,matches = [];

while(match = re.exec(content)){
matches.push(match [1]);
}

for(i = 0; i< matches.length; i ++){
value = matches [i];
console.log(value +..... value);
vSearch = value.replace(/ [ - \ / \\ ^ $ * +?。=()| [\] {}] / g,'\\ $&') ;
console.log(vSearch +....... vSearch);
regExSearch = new RegExp(vSearch,'g');
console.log(regExSearch +........ regExSearch);
content = content.replace(regExSearch,'< a href =#>'+ value +'< / a>');
}

$(。display)。append(content);



  a {
颜色:红色;
text-decoration:underline;
}

我遇到了一个问题:如果最后一个哈希标记词与其他任何一个匹配字的第一个字符,然后它只包含该字的一部分。对于这个POC,红色是最后一个哈希标记,这就是为什么第一个红色只变成红色的原因。它应该包装整个单词redApple。

任何帮助将不胜感激。

解决方案

最终答案



似乎hashtag正则表达式不支持Unicode字母。由于 \p {L} 无法在JavaScript中使用,我建议使用将替换它的字符类(取自 XRegExp )。 \ b 字边界不适用于它们,因为它们不被视为单词字符,因此,我们需要(?![^ < / * c $ c>预览将检查标签是否已经被包含在< a> 标签中。 / p>

代码如下:



 <$ c#c> var content =我喜欢#red苹果,我有#黑色的帽子,#red是我最喜欢的颜色,#speçial。#anötherSpecial#estã和#ãest,但是请记住#pisklę!是否#Świętą ?!#русскийтест。; var re = /#[0-9A-Za-z\xAA\xB5\xBA\xC0- \xD6\xD8- \xF6\xF8- \ u02C1\\\ˆ-\\\ˑ\\\ˠ-\\\ˤ\\\ˬ\\\ˮ\\\Ͱ-\\\ʹ\\\Ͷ\\\ͷ\\\ͺ-\\\ͽ\\\Ϳ\\\Ά\\\Έ -\\\Ί\\ u038C\\\Ύ-\\\Ρ\\\Σ-\\\ϵ\\\Ϸ-\\\ҁ\\\Ҋ-\\\ԯ\\\Ա-\\\Ֆ\\\ՙ\\\ա-\\\և\\\א- \\\ת\\\װ-\\\ײ\\\ؠ-\\\ي\\\ٮ\\\ٯ\\\ٱ-\\\ۓ\\\ە\\\ۥ\\\ۦ\\\ۮ\\\ۯ\\\ۺ-\\ \ۼ\\\ۿ\\\ܐ\\\ܒ-\\\ܯ\\\ݍ-\\\ޥ\\\ޱ\\\ߊ-\\\ߪ\\\ߴ\\\ߵ\\\ߺ\\\ࠀ-\\\ࠕ\ u081A\\\ࠤ\\\ࠨ\\\ࡀ-\\\ࡘ\\\ࢠ-\\\ࢲ\\\ऄ-\\\ह\\\ऽ\\\ॐ\\\क़-\\\ॡ\\\ॱ-\\\ঀ\ u0985-\\\ঌ\\\এ\\\ঐ\\\ও-\\\ন\\\প-\\\র\\\ল\\\শ-\\\হ\\\ঽ\\\ৎ\\\ড়\\\ঢ়\\\য় -\\\ৡ\\\ৰ\\\ৱ\\\ਅ-\\\ਊ\\\ਏ\\\ਐ\\\ਓ-\\\ਨ\\\ਪ-\\\ਰ\\\ਲ\u0 A33\\\ਵ\\\ਸ਼\\\ਸ\\\ਹ\\\ਖ਼-\\\ੜ\\\ਫ਼\\\ੲ-\\\ੴ\\\અ-\\\ઍ\\\એ-\\\ઑ\\\ઓ,\ u0AA8\\\પ-\\\ર\\\લ\\\ળ\\\વ-\\\હ\\\ઽ\\\ૐ\\\ૠ\\\ૡ\\\ଅ-\\\ଌ\\\ଏ\\\ଐ\\\ଓ- \\\ନ\\\ପ-\\\ର\\\ଲ\\\ଳ\\\ଵ-\\\ହ\\\ଽ\\\ଡ଼\\\ଢ଼\\\ୟ-\\\ୡ\\\ୱ\\\ஃ\\\அ-\\ \ஊ\\\எ-\\\ஐ\\\ஒ-\\\க\\\ங\\\ச\\\ஜ\\\ஞ\\\ட\\\ண\\\த\\\ந-\\\ப\\\ம,\ u0BB9\\\ௐ\\\అ-\\\ఌ\\\ఎ-\\\ఐ\\\ఒ-\\\న\\\ప-\\\హ\\\ఽ\\\ౘ\\\ౙ\\\ౠ\\\ౡ\\\ಅ -\\\ಌ\\\ಎ-\\\ಐ\\\ಒ-\\\ನ\\\ಪ-\\\ಳ\\\ವ-\\\ಹ\\\ಽ\\\ೞ\\\ೠ\\ \ೡ\\\ೱ\\\ೲ\\\അ-\\\ഌ\\\എ-\\\ഐ\\\ഒ-\\\ഺ\\\ഽ\\\ൎ\\\ൠ\\\ൡ\\\ൺ-\\\ൿ\ u0D85-\\\ඖ\\\ක-\\\න\\\ඳ-\\\ර\\\ල\\\ව-\\\ෆ\\\ก-\\\ะ\\\า\\\ำ\\\เ-\\\ๆ\\ \ກ\\\ຂ\\\ຄ\\\ງ\\\ຈ\\\ຊ\\\ຍ\\\ດ-\\\ທ\\\ນ-\\\ຟ\\\ມ-\\\ຣ\\\ລ\\\ວ\\\ສ \\\ຫ\\\ອ-\\\ະ\\\າ\\\ຳ\\\ຽ\\\ເ-\\\ໄ\\\ໆ\\\ໜ-\\\ໟ\\\ༀ\\\ཀ-\\\ཇ\\\ཉ- \\\ཬ\\\ྈ-\\\ྌ\\\က-\\\ဪ\\\ဿ\\\ၐ-\\\ၕ\\\ၚ-\\\ၝ\\\ၡ\\\ၥ\\\ၦ\\\ၮ-\\\ၰ \\\ၵ-\\\ႁ\\\ႎ\\\Ⴀ-\\\Ⴥ\\\Ⴧ\\\Ⴭ\\\ა-\\\ჺ\\\ჼ-\\\ቈ\\\ቊ-\u 124D\\\ቐ-\\\ቖ\\\ቘ\\\ቚ-\\\ቝ\\\በ-\\\ኈ\\\ኊ-\\\ኍ\\\ነ-\\\ኰ\\\ኲ-\\\ኵ\\\ኸ- \\\ኾ\\\ዀ\\\ዂ-\\\ዅ\\\ወ-\\\ዖ\\\ዘ-\\\ጐ\\\ጒ-\\\ጕ\\\ጘ-\\\ፚ\\\ᎀ-\\\ᎏ\ u13A0-\\\Ᏼ\\\ᐁ-\\\ᙬ\\\ᙯ-\\\ᙿ\\\ᚁ-\\\ᚚ\\\ᚠ-\\\ᛪ\\\ᛱ-\\\ᛸ\\\ᜀ-\\\ᜌ\\\ᜎ -\\\ᜑ\\\ᜠ-\\\ᜱ\\\ᝀ-\\\ᝑ\\\ᝠ-\\\ᝬ\\\ᝮ-\\\ᝰ\\\ក-\\\ឳ\\\ៗ\\\ៜ\\\ᠠ-\\ \ᡷ\\\ᢀ-\\\ᢨ\\\ᢪ\\\ᢰ-\\\ᣵ\\\ᤀ-\\\ᤞ\\\ᥐ-\\\ᥭ\\\ᥰ-\\\ᥴ\\\ᦀ-\\\ᦫ\\\ᧁ -\\\ᧇ\\\ᨀ-\\\ᨖ\\\ᨠ-\\\ᩔ\\\ᪧ\\\ᬅ-\\\ᬳ\\\ᭅ-\\\ᭋ\\\ᮃ-\\\ᮠ\\\ᮮ\\\ᮯ\ u1BBA -\\\ᯥ\\\ᰀ-\\\ᰣ\\\ᱍ-\\\ᱏ\\\ᱚ-\\\ᱽ\\\ᳩ-\\\ᳬ\\\ᳮ-\\\ᳱ\\\ᳵ\\\ᳶ\\\ᴀ-\\ \ᶿ\\\Ḁ-\\\ἕ\\\Ἐ-\\\Ἕ\\\ἠ-\\\ὅ\\\Ὀ-\\\Ὅ\\\ὐ-\\\ὗ\\\Ὑ\\\Ὓ\\\Ὕ\\\Ὗ- \\\ώ\\\ᾀ-\\\ᾴ\\\ᾶ-\\\ᾼ\\\ι\\\ῂ-\\\ῄ\\\ῆ-\\\ῌ\\\ῐ-\\\ΐ\\\ῖ-\\\Ί\ u1FE0-\\\Ῥ\\\ῲ-\\\ῴ\\\ῶ-\\\ῼ\\\ⁱ\\\ⁿ\\\ₐ-\\\ₜ\\\ℂ\\\ℇ\\\ℊ-\\\ℓ\\\ℕ\ u2119-\\\ℝ\\\ℤ\\\Ω\\\ℨ\\\K-\\\ℭ\\\ℯ-\\\ℹ\\\ℼ-\\\ℿ\\\ⅅ-\\\ⅉ\\\ⅎ\\\Ↄ\ u2184\\\Ⰰ-\\\Ⱞ\\\ⰰ-\\\ⱞ\\\Ⱡ-\\\ⳤ\\\Ⳬ-\\\ⳮ\\\Ⳳ\\\ⳳ\\\ⴀ-\\\ⴥ\\\ⴧ\u2D 2D\\\ⴰ-\\\ⵧ\\\ⵯ\\\ⶀ-\\\ⶖ\\\ⶠ-\\\ⶦ\\\ⶨ-\\\ⶮ\\\ⶰ-\\\ⶶ\\\ⶸ-\\\ⶾ\\\ⷀ- \\\ⷆ\\\ⷈ-\\\ⷎ\\\ⷐ-\\\ⷖ\\\ⷘ-\\\ⷞ\\\ⸯ\\\々\\\〆\\\〱-\\\〵\\\〻\\\〼\\\ぁ- \\\ゖ\\\ゝ-\\\ゟ\\\ァ-\\\ヺ\\\ー-\\\ヿ\\\ㄅ-\\\ㄭ\\\ㄱ-\\\ㆎ\\\ㆠ-\\\ㆺ\\\ㇰ-\\ \ㇿ\\\㐀-\\\䶵\\\一-\\\鿌\\\ꀀ-\\\ꒌ\\\ꓐ-\\\ꓽ\\\ꔀ-\\\ꘌ\\\ꘐ-\\\ꘟ\\\ꘪ\\\ꘫ \\\Ꙁ-\\\ꙮ\\\ꙿ-\\\ꚝ\\\ꚠ-\\\ꛥ\\\ꜗ-\\\ꜟ\\\Ꜣ-\\\ꞈ\\\Ꞌ-\\\ꞎ\\\Ꞑ-\\\Ɬ\\ \Ʞ\\\Ʇ\\\ꟷ-\\\ꠁ\\\ꠃ-\\\ꠅ\\\ꠇ-\\\ꠊ\\\ꠌ-\\\ꠢ\\\ꡀ-\\\ꡳ\\\ꢂ-\\\ꢳ\\\ꣲ - \ꣷ\\\ꣻ\\\ꤊ-\\\ꤥ\\\ꤰ-\\\ꥆ\\\ꥠ-\\\ꥼ\\\ꦄ-\\\ꦲ\\\ꧏ\\\ꧠ-\\\ꧤ\\\ꧦ-\\\ꧯ \\\ꧺ-\\\ꧾ\\\ꨀ-\\\ꨨ\\\ꩀ-\\\ꩂ\\\ꩄ-\\\ꩋ\\\ꩠ-\\\ꩶ\\\ꩺ\\\ꩾ-\\\ꪯ\\\ꪱ\ uAAB5\\\ꪶ\\\ꪹ-\\\ꪽ\\\ꫀ\\\ꫂ\\\ꫛ-\\\ꫝ\\\ꫠ-\\\ꫪ\\\ꫲ-\\\ꫴ\\\ꬁ-\\\ꬆ\\\ꬉ-\\ \ꬎ\\\ꬑ-\\\ꬖ\\\ꬠ-\\\ꬦ\\\ꬨ-\\\ꬮ\\\ꬰ-\\\ꭚ\\\ꭜ-\\\ꭟ\\\ꭤ\\\ꭥ\\\ꯀ-\\\ꯢ \\\가-\\\힣\\\ힰ-\\\ퟆ\\\ퟋ-\\\ퟻ\\\豈-\\\舘\\\並-\\\龎\\\ff-\\\st\\\ﬓ-\\\ﬗ\\ \יִ\\\ײַ-\\\ﬨ\\\שׁ-\\\זּ\\\טּ-\\\לּ\\\מּ\\\נּ\\\סּ\\\ףּ\\\פּ\\\צּ-\\\ﮱ\uFBD 3- \\\ﴽ\\\ﵐ-\\\ﶏ\\\ﶒ-\\\ﷇ\\\ﷰ-\\\ﷻ\\\ﹰ-\\\ﹴ\\\ﹶ-\\\ﻼ\\\A-\\\Z\\\a -  \\ uFF5A \ \\ uFF66 \\ \\ \\ uFFBE \ uFFC2 \\ \\ \\ uFFC7 \ uFFCA \\ \\ \\ uFFCF \\ \\ uFFD2 \\ \\ \\ uFFD7 \\ \\ uFFDA  -  \\ \\ \\ uFFDC] + / ig; matches = content.match( (函数(a,b){return b.length  -  a.length;}); for(i = 0;我< matches.length; i ++){value = matches [i]; regExSearch = new RegExp(matches [i] +(?![^<] *< / a>),'g'); content = content.replace(regExSearch,'< a href =#>'+ value +'< / a>');} $(。display)。append(content);  

a {color:red; text-decoration:underline;}

< script src = https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js\"></script><p class =display>< / p>



原始答案



您可以结合使用非单词边界和单词边界

  regExSearch = new RegExp(\\B+ vSearch +\\b,'g ); 

此处, \B 将匹配于非单词位置(单词字符或非单词字符之间, \b 将匹配其他位置(单词和非单词字符之间)。



另外,我删除了代码中下面的2行冗余:

  vSearch = value.replace(/ [ -  \ / \\ ^ $ * +?。=()| [\] {}] / g,'\\ $&'); 
console.log(vSearch +....... vSearch);

此外,值得一提的是,您正在使用围绕整个正则表达式模式的捕获组(#[a-z0-9] [a-z0-9 \ -_] *)然后手动创建一个数组。实际上你不需要它,并且可以使用#轻松地获得一个匹配的数组# [a-z0-9] [a-z0-9\ -_] *



正在工作的代码: div c lass =snippet-code>

  var content =我喜欢#redApple。我有#黑帽子。 #red是我最喜欢的颜色; var re = /#[a-z0-9] [a-z0-9 \ -_] * / ig; var matches = content.match(re); for(i = 0 ; i< matches.length; i ++){value = matches [i]; console.log(value +..... value); regExSearch = new RegExp(\\B+ matches [i ] +\\b,'g'); console.log(regExSearch +........ regExSearch); content = content.replace(regExSearch,'< a href =# >'+ value +'< / a>);} $(。display)。append(content);  

  a {color:red; text-decoration:underline;}  

 < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js >< / script>< p class =display>< / p>  

b
$ b

获得的HTML:


I am trying to match hash tags and wrap them with an anchor tag. Here is the POC:

<p class="display"></p>

var content = "I like #redApple. I have a #black hat. #red is my favorite color";

var re = /(#[a-z0-9][a-z0-9\-_]*)/ig,
    match, matches = [];

while (match = re.exec(content)) {
    matches.push(match[1]);
}

for (i = 0; i < matches.length; i++) {
    value = matches[i];
    console.log(value + ".....value");
    vSearch = value.replace(/[-\/\\^$*+?.=()|[\]{}]/g, '\\$&');
    console.log(vSearch + ".......vSearch");
    regExSearch = new RegExp(vSearch, 'g');
    console.log(regExSearch + "........regExSearch");
    content = content.replace(regExSearch, '<a href="#">' + value + '</a> ');
}

$(".display").append(content);

a {
    color: red;
    text-decoration: underline;
}

I am facing a problem: if the last hash tag word is matching any other word's first characters then its wrapping only that part of the word. For this POC, "red" is the last hash tag, that's why first "redApple" becomes "red" only. It should wrap the whole word "redApple".

Any help will be appreciated.

解决方案

Final answer

It appeared that the hashtag regex did not support Unicode letters. Since \p{L} is not possible to use in JavaScript, I suggest using the character class that will replace it (taken from XRegExp). The \b word boundary would not work with them as they are not treated as word characters, and thus, we need a (?![^<]*</a>) look-ahead that will check if the hashtag is already enclosed in <a> tag.

The code looks like:

var content = "I like #redApple. I have a #black hat. #red is my favorite color. #speçial. #anötherSpecial #estã, and #ãest. But also remember about #pisklę! Was it #Świętą?! #русский тест.";

var re = /#[0-9A-Za-z\xAA\xB5\xBA\xC0-\xD6\xD8-\xF6\xF8-\u02C1\u02C6-\u02D1\u02E0-\u02E4\u02EC\u02EE\u0370-\u0374\u0376\u0377\u037A-\u037D\u037F\u0386\u0388-\u038A\u038C\u038E-\u03A1\u03A3-\u03F5\u03F7-\u0481\u048A-\u052F\u0531-\u0556\u0559\u0561-\u0587\u05D0-\u05EA\u05F0-\u05F2\u0620-\u064A\u066E\u066F\u0671-\u06D3\u06D5\u06E5\u06E6\u06EE\u06EF\u06FA-\u06FC\u06FF\u0710\u0712-\u072F\u074D-\u07A5\u07B1\u07CA-\u07EA\u07F4\u07F5\u07FA\u0800-\u0815\u081A\u0824\u0828\u0840-\u0858\u08A0-\u08B2\u0904-\u0939\u093D\u0950\u0958-\u0961\u0971-\u0980\u0985-\u098C\u098F\u0990\u0993-\u09A8\u09AA-\u09B0\u09B2\u09B6-\u09B9\u09BD\u09CE\u09DC\u09DD\u09DF-\u09E1\u09F0\u09F1\u0A05-\u0A0A\u0A0F\u0A10\u0A13-\u0A28\u0A2A-\u0A30\u0A32\u0A33\u0A35\u0A36\u0A38\u0A39\u0A59-\u0A5C\u0A5E\u0A72-\u0A74\u0A85-\u0A8D\u0A8F-\u0A91\u0A93-\u0AA8\u0AAA-\u0AB0\u0AB2\u0AB3\u0AB5-\u0AB9\u0ABD\u0AD0\u0AE0\u0AE1\u0B05-\u0B0C\u0B0F\u0B10\u0B13-\u0B28\u0B2A-\u0B30\u0B32\u0B33\u0B35-\u0B39\u0B3D\u0B5C\u0B5D\u0B5F-\u0B61\u0B71\u0B83\u0B85-\u0B8A\u0B8E-\u0B90\u0B92-\u0B95\u0B99\u0B9A\u0B9C\u0B9E\u0B9F\u0BA3\u0BA4\u0BA8-\u0BAA\u0BAE-\u0BB9\u0BD0\u0C05-\u0C0C\u0C0E-\u0C10\u0C12-\u0C28\u0C2A-\u0C39\u0C3D\u0C58\u0C59\u0C60\u0C61\u0C85-\u0C8C\u0C8E-\u0C90\u0C92-\u0CA8\u0CAA-\u0CB3\u0CB5-\u0CB9\u0CBD\u0CDE\u0CE0\u0CE1\u0CF1\u0CF2\u0D05-\u0D0C\u0D0E-\u0D10\u0D12-\u0D3A\u0D3D\u0D4E\u0D60\u0D61\u0D7A-\u0D7F\u0D85-\u0D96\u0D9A-\u0DB1\u0DB3-\u0DBB\u0DBD\u0DC0-\u0DC6\u0E01-\u0E30\u0E32\u0E33\u0E40-\u0E46\u0E81\u0E82\u0E84\u0E87\u0E88\u0E8A\u0E8D\u0E94-\u0E97\u0E99-\u0E9F\u0EA1-\u0EA3\u0EA5\u0EA7\u0EAA\u0EAB\u0EAD-\u0EB0\u0EB2\u0EB3\u0EBD\u0EC0-\u0EC4\u0EC6\u0EDC-\u0EDF\u0F00\u0F40-\u0F47\u0F49-\u0F6C\u0F88-\u0F8C\u1000-\u102A\u103F\u1050-\u1055\u105A-\u105D\u1061\u1065\u1066\u106E-\u1070\u1075-\u1081\u108E\u10A0-\u10C5\u10C7\u10CD\u10D0-\u10FA\u10FC-\u1248\u124A-\u124D\u1250-\u1256\u1258\u125A-\u125D\u1260-\u1288\u128A-\u128D\u1290-\u12B0\u12B2-\u12B5\u12B8-\u12BE\u12C0\u12C2-\u12C5\u12C8-\u12D6\u12D8-\u1310\u1312-\u1315\u1318-\u135A\u1380-\u138F\u13A0-\u13F4\u1401-\u166C\u166F-\u167F\u1681-\u169A\u16A0-\u16EA\u16F1-\u16F8\u1700-\u170C\u170E-\u1711\u1720-\u1731\u1740-\u1751\u1760-\u176C\u176E-\u1770\u1780-\u17B3\u17D7\u17DC\u1820-\u1877\u1880-\u18A8\u18AA\u18B0-\u18F5\u1900-\u191E\u1950-\u196D\u1970-\u1974\u1980-\u19AB\u19C1-\u19C7\u1A00-\u1A16\u1A20-\u1A54\u1AA7\u1B05-\u1B33\u1B45-\u1B4B\u1B83-\u1BA0\u1BAE\u1BAF\u1BBA-\u1BE5\u1C00-\u1C23\u1C4D-\u1C4F\u1C5A-\u1C7D\u1CE9-\u1CEC\u1CEE-\u1CF1\u1CF5\u1CF6\u1D00-\u1DBF\u1E00-\u1F15\u1F18-\u1F1D\u1F20-\u1F45\u1F48-\u1F4D\u1F50-\u1F57\u1F59\u1F5B\u1F5D\u1F5F-\u1F7D\u1F80-\u1FB4\u1FB6-\u1FBC\u1FBE\u1FC2-\u1FC4\u1FC6-\u1FCC\u1FD0-\u1FD3\u1FD6-\u1FDB\u1FE0-\u1FEC\u1FF2-\u1FF4\u1FF6-\u1FFC\u2071\u207F\u2090-\u209C\u2102\u2107\u210A-\u2113\u2115\u2119-\u211D\u2124\u2126\u2128\u212A-\u212D\u212F-\u2139\u213C-\u213F\u2145-\u2149\u214E\u2183\u2184\u2C00-\u2C2E\u2C30-\u2C5E\u2C60-\u2CE4\u2CEB-\u2CEE\u2CF2\u2CF3\u2D00-\u2D25\u2D27\u2D2D\u2D30-\u2D67\u2D6F\u2D80-\u2D96\u2DA0-\u2DA6\u2DA8-\u2DAE\u2DB0-\u2DB6\u2DB8-\u2DBE\u2DC0-\u2DC6\u2DC8-\u2DCE\u2DD0-\u2DD6\u2DD8-\u2DDE\u2E2F\u3005\u3006\u3031-\u3035\u303B\u303C\u3041-\u3096\u309D-\u309F\u30A1-\u30FA\u30FC-\u30FF\u3105-\u312D\u3131-\u318E\u31A0-\u31BA\u31F0-\u31FF\u3400-\u4DB5\u4E00-\u9FCC\uA000-\uA48C\uA4D0-\uA4FD\uA500-\uA60C\uA610-\uA61F\uA62A\uA62B\uA640-\uA66E\uA67F-\uA69D\uA6A0-\uA6E5\uA717-\uA71F\uA722-\uA788\uA78B-\uA78E\uA790-\uA7AD\uA7B0\uA7B1\uA7F7-\uA801\uA803-\uA805\uA807-\uA80A\uA80C-\uA822\uA840-\uA873\uA882-\uA8B3\uA8F2-\uA8F7\uA8FB\uA90A-\uA925\uA930-\uA946\uA960-\uA97C\uA984-\uA9B2\uA9CF\uA9E0-\uA9E4\uA9E6-\uA9EF\uA9FA-\uA9FE\uAA00-\uAA28\uAA40-\uAA42\uAA44-\uAA4B\uAA60-\uAA76\uAA7A\uAA7E-\uAAAF\uAAB1\uAAB5\uAAB6\uAAB9-\uAABD\uAAC0\uAAC2\uAADB-\uAADD\uAAE0-\uAAEA\uAAF2-\uAAF4\uAB01-\uAB06\uAB09-\uAB0E\uAB11-\uAB16\uAB20-\uAB26\uAB28-\uAB2E\uAB30-\uAB5A\uAB5C-\uAB5F\uAB64\uAB65\uABC0-\uABE2\uAC00-\uD7A3\uD7B0-\uD7C6\uD7CB-\uD7FB\uF900-\uFA6D\uFA70-\uFAD9\uFB00-\uFB06\uFB13-\uFB17\uFB1D\uFB1F-\uFB28\uFB2A-\uFB36\uFB38-\uFB3C\uFB3E\uFB40\uFB41\uFB43\uFB44\uFB46-\uFBB1\uFBD3-\uFD3D\uFD50-\uFD8F\uFD92-\uFDC7\uFDF0-\uFDFB\uFE70-\uFE74\uFE76-\uFEFC\uFF21-\uFF3A\uFF41-\uFF5A\uFF66-\uFFBE\uFFC2-\uFFC7\uFFCA-\uFFCF\uFFD2-\uFFD7\uFFDA-\uFFDC]+/ig;

matches = content.match(re);
matches.sort(function(a, b) {
    return b.length - a.length;
});
for (i = 0; i < matches.length; i++) {
    value = matches[i];
    regExSearch = new RegExp(matches[i] + "(?![^<]*</a>)", 'g');
    content = content.replace(regExSearch, '<a href="#">' + value + '</a>');
}

$(".display").append(content);

a {
    color: red;
    text-decoration: underline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<p class="display"></p>

Original answer

You can use a combination of a non-word boundary and a word boundary:

regExSearch = new RegExp("\\B" + vSearch + "\\b", 'g');

Here, \B will match at the non-word position (between word characters, or non-word characters, and \b will match at other positions (between a word and non-word character).

Also, I removed the 2 lines below in your code that are redundant:

vSearch = value.replace(/[-\/\\^$*+?.=()|[\]{}]/g, '\\$&');
console.log(vSearch + ".......vSearch");

Also, it is worth mentioning that you are using a capturing group around the whole regex pattern (#[a-z0-9][a-z0-9\-_]*) and then creating an array "manually". You do not need it in fact, and can easily get an array with match using #[a-z0-9][a-z0-9\-_]*.

The code that is working:

var content = "I like #redApple. I have a #black hat. #red is my favorite color";

var re = /#[a-z0-9][a-z0-9\-_]*/ig;
var matches = content.match(re);

for (i = 0; i < matches.length; i++) {
    value = matches[i];
    console.log(value + ".....value");
    regExSearch = new RegExp("\\B" + matches[i] + "\\b", 'g');
    console.log(regExSearch + "........regExSearch");
    content = content.replace(regExSearch, '<a href="#">' + value + '</a> ');
}

$(".display").append(content);

a {
    color: red;
    text-decoration: underline;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p class="display"></p>

HTML obtained:

这篇关于带有哈希标记的RegEx问题的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆