Javascript/jQuery - 使用正则表达式解析字符串中的主题标签，URL 中的锚点除外

Posted 2023-02-22

【中文标题】Javascript/jQuery - 使用正则表达式解析字符串中的主题标签，URL 中的锚点除外

【英文标题】：Javascript/jQuery - parse hashtags in a string using regex, except for anchors in URLs

【发布时间】：2014-02-20 16:36:30

【问题描述】：

我在 SO 上查看了其他几个可能的解决方案，但没有看到任何正在做我正在做的事情。

目前我已经能够使用以下代码解析字符串并检测哈希标签：

mystring = mystring.replace(/(^|\W)(#[a-z\d][\w-]*)/ig, "$1<span class='hash_tag'>$2</span>").replace(/\s*$/, "");

这成功地检测到了各种#hashtags。但是，它也会检测 URL 中的锚点，例如：http://www.example.com/#anchor - 我不知道如何修改必须排除锚点的内容，同时保持灵活性。

谢谢

【问题讨论】：

好吧，你正在深入一些令人讨厌的事情。 html解析！顺便说一句，URL 中的主题标签在哪里？它们在 中吗？或者可能在任何地方？

嗨@MohammedJoraid - URL 将在字符串中提及，例如example.com/#anchor，而不是在 标记中。我认为最好的事情是在主题标签之前必须是空格/换行符（或字符串的开头） - 其他任何东西，它不被视为主题标签。

#hola#yes#livelong .. opps，我忘了在使用#之前添加空格

【参考方案1】：

如果它前面有一个空格或者它是字符串的开头，这是一个匹配标签（#）的正则表达式。像这样：

(^|\s)(#[a-z\d-]+)

工作正则表达式示例：

http://regex101.com/r/pJ4wC5

javascript：

var string = '#hello This is an #example of some text with #hash-tags - http://www.example.com/#anchor but dont want the link';

string = string.replace(/(^|\s)(#[a-z\d-]+)/ig, "$1<span class='hash_tag'>$2</span>");

console.log(string);

输出：

<span class='hash_tag'>#hello</span> This is an <span class='hash_tag'>#example</span> of some text with <span class='hash_tag'>#hash-tags</span> - http://www.example.com/#anchor but dont want the link

【讨论】：

感谢@MElliott - 我将其修改为 (^|\s)(#[a-z\d][\w-]*) ，这似乎很完美。允许 _ - 等作为主题标签的一部分。

顺便说一句，感谢您向我展示 regex101 - 测试正则表达式的好网站。此外，对您的小修改也允许将 _ 作为标签的一部分： (^|\s)(#[a-z\d-_]+)

@Martin，太棒了！很高兴我能帮助你。谢谢你。是的，regex101 已成为我的最爱。 :)

知道如何在不进行 # 即 $2 == 示例而不是 $2 == #example 的情况下从中获取主题标签值

@RossJ，是的，在正则表达式中，您可以从捕获组（括号）中排除“#”，如下所示：/(^|\s)#([az\d-] +)/ig

【参考方案2】：

我知道这已经得到解答，但是如果您需要样式，这是我在项目中使用的解决方案：

<div id='result'>The quick brown #fox jumps over the #second  lazy dog</div>
<div id='result2'> </div>

//jquery
var str = $('#result').html(); 
var edt = str.replace(/(^|\s)(#[a-z\d-]+)/ig, "$1<span class='hash_tag'>$2</span>");

$('#result2').html(edt);




//CSS
.hash_tag color:red;
#result display:none;

【参考方案3】：

这个想法是先尝试匹配“a”标签，然后再尝试捕获组中的主题标签子模式。回调函数测试捕获组并返回“a”标签或修饰符主题标签子字符串：

var str = '<a href="sdfsdfd#ank"> qsdqd</a> #toto (#titi) ^#t-_-Ata';

var result = str.replace(/<a\b[^>]*>|\B(#[^\W_][\w-]*)/gi,
                         function (m, p) 
                          return (p) ? '<span class="hash_tag">'+m+'</span>' : m;
                         );

console.log(result);

【讨论】：

@Casimer - 谢谢，但是 URL 将在字符串中提及，例如 example.com/#anchor，而不是在 标记中。我认为最好的办法是在#hashtag 之前必须是空格/换行符（或字符串的开头） - 其他任何东西，它不被视为哈希标签。