Javascript/jQuery - parse hashtags in a string using regex, except for anchors in URLs

Question

I've looked at a couple of other possible solutions on SO but didn't see any that were doing what I was doing.

Currently I have been able to parse a string and detect hash tags with the following code:

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

And this successfully detects all sorts of #hashtags. However it also detects anchors in URLs, such as: http://www.example.com/#anchor - I can't work out how to modify what I have to exclude anchors while keeping it flexible.

Thanks

well, you are going deep into something nasty. HTML parsing! BTW, where do the hashtags in URLs located? are they in <a> ?or might be in anywhere? — Mohammed Joraid
– Mohammed Joraid, Commented Jan 29, 2014 at 3:56
hi @MohammedJoraid - the URL would be mentioned in a string, like example.com/#anchor and not within an <a> tag. I think the best thing would be preceding the hashtag must be a space/newline character (or start of string) - anything else and it isn't considered a hash tag. — Martin
– Martin, Commented Jan 29, 2014 at 6:13
#hola#yes#livelong .. opps, i forgot to add space before using the # — Mohammed Joraid
– Mohammed Joraid, Commented Jan 29, 2014 at 7:31

Bryan Elliott · Accepted Answer · 2017-06-18 03:17:58Z

34

Here's a regex to match hashtag(#) if it has a space before it or it's beginning of string.. like so:

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

Working regex example:

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

Output:

<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

edited Jun 18, 2017 at 3:17

answered Jan 29, 2014 at 5:32

Bryan Elliott

4,0852 gold badges24 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Martin Over a year ago

Thanks @MElliott - I modified it to (^|\s)(#[a-z\d][\w-]*) and that seems to be perfect. Allowing _ - etc as part of the hashtag.

Martin Over a year ago

btw, thanks for showing me regex101 - great site to test the regex on. Also a small modification to yours allowed the _ as part of the tag too: (^|\s)(#[a-z\d-_]+)

Bryan Elliott Over a year ago

@Martin, Awesome! Glad I could help. Thank you. Yes, regex101 has become my favorite. :)

Ross J Over a year ago

Any idea how I could get the hashtag value out of this without the proceeding # i.e. $2 == example rather than $2 == #example

Bryan Elliott Over a year ago

@RossJ, Yes, in the regex you could just exclude the '#' from the capture group (parens), like so: /(^|\s)#([a-z\d-]+)/ig

|

sabatino · Accepted Answer · 2014-09-22 14:47:48Z

1

I know this has been answered, but if you need styling, here's a solution i used on a project:

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

answered Sep 22, 2014 at 14:47

sabatino

744 bronze badges

Comments

Casimir et Hippolyte · Accepted Answer · 2014-01-29 05:49:13Z

0

The idea is to try to match the "a" tag first and after trying the hashtag subpattern that is in a capturing group. A callback function tests the capturing group and returns the "a" tag or the modifier hashtag substring:

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

answered Jan 29, 2014 at 5:49

Casimir et Hippolyte

90k5 gold badges102 silver badges131 bronze badges

1 Comment

Martin Over a year ago

@Casimer - thanks, however the URL would be mentioned in a string, like example.com/#anchor and not within an <a> tag. I think the best thing would be preceding the #hashtag must be a space/newline character (or start of string) - anything else and it isn't considered a hash tag.

Collectives™ on Stack Overflow

Javascript/jQuery - parse hashtags in a string using regex, except for anchors in URLs

3 Answers 3

6 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

6 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related