JavaScript/jQuery - 使用正则表达式解析字符串中的哈希标签，但不包括URL链接中的锚点

Question

我在 Stack Overflow 上看了一些其他可能的解决方案，但没有看到任何一个与我所做的相同。

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

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 - 我无法想出如何修改代码来排除锚点而保持灵活性。

谢谢

- Martin

---

嗯，你正在深入某些讨厌的东西。HTML解析！顺便问一下，在URL中的哈希标记（hashtags）位于哪里？它们是在<a>标签中吗？还是可能在任何地方？ - Mohammed Joraid

嗨@MohammedJoraid - URL将在字符串中提到，例如http://example.com/#anchor，而不是在<a>标签内。我认为最好的方法是在井号之前必须有一个空格/换行符（或字符串的开头）-除此以外，它不被视为哈希标签。 - Martin

#hola#yes#livelong# 对不起，我在使用#前忘记添加空格了。 - Mohammed Joraid

Answer 1

以下是用正则表达式匹配在hashtag(#)前有空格或位于字符串开头的方法：

(^|\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

- Bryan Elliott

---

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

顺便说一句，谢谢你向我展示了regex101 - 这是一个很好的测试正则表达式的网站。同时，对你的代码进行了一点小修改，允许标签中包含下划线：(^|\s)(#[a-z\d-_]+)。 - Martin

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

有什么办法可以在不包含#的情况下获取这个hashtag的值吗？例如，$2 == example而不是$2 == #example。 - Ross J

@RossJ，是的，在正则表达式中，您可以从捕获组（括号）中排除“#”，就像这样：/(^|\s)#([a-z\d-]+)/ig - Bryan Elliott

大家好，你需要更改这段代码：string.replace(/(^|\s)(#[a-z\d-]+)/ig, "$1<span class='hash_tag'>$2</span>"); 为 string = string.replace(/(^|\s)(#[a-z\d-]+)/ig, "$1<span class='hash_tag'>$2</span>"); - max

Answer 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;}

- sabatino

Answer 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);

- Casimir et Hippolyte

---

@Casimer - 谢谢，不过URL将会被放在一个字符串中，像是http://example.com/#anchor而不是在<a>标签内。我认为最好的方法是在#hashtag之前必须有一个空格/换行符（或者是字符串的开头）- 如果有其他字符就不会被视为hash tag。 - Martin