带有哈希标记的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中使用，我建议使用将替换它的字符类（取自）。 \ 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- \\\ﴽ\\\ﵐ-\\\ﶏ\\\ﶒ-\\\ﷇ\\\ﷰ-\\\ﷻ\\\ﹰ-\\\ﹴ\\\ﹶ-\\\ﻼ\\\Ａ-\\\Ｚ\\\ａ -  \\ 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>