javascript how to regex match and replace on hashtags but exclude the hashtag character

user_1634905 0
Viewed 127

I have the following function:

function formattedTitle(posttitle,hreflink) {
  return `<a href='`+ hreflink +`'>` + posttitle.replace(/(^|\s)(#[-.\w]+)/gi, `$1</a><a class="hashtag" href='/search?q=hashtag:"$2"'>$2</a><a href='`+ hreflink + `'>`) + '</a>';
}

When I run 

console.log(formattedTitle('This is #awesome news','google.com'));

It outputs:

<a href='google.com'>This is </a><a class="hashtag" href='/search?q=hashtag:"#awesome"'>#awesome</a><a href='google.com'> news</a>


function formattedTitle(posttitle, hreflink) {
  return `<a href='` + hreflink + `'>` + posttitle.replace(/(^|\s)(#[-.\w]+)/gi, `$1</a><a class="hashtag" href='/search?q=hashtag:"$2"'>$2</a><a href='` + hreflink + `'>`) + '</a>';
}


console.log(formattedTitle('This is #awesome news', 'google.com'));

Notice how it includes the "#" in the $2 match. How can I exclude the hashtag character in the hashtag: attribute but keep it in between the href value?

So the output should look like:

<a href='google.com'>This is </a><a class="hashtag" href='/search?q=hashtag:"awesome"'>#awesome</a><a href='google.com'> news</a>

I have been able to get it to work by doing another replace on the entire thing to replace '/search?q=hashtag:"# with '/search?q=hashtag:" but I am wondering if it's possible without the second replace?

regex-lookarounds node.js javascript regex
3 Answers

Move the # outside of the captured 2nd group, so it isn't captured. When replacing, in the href, replace with just $2 (so no hashtag). When replacing the text inside the <a>, replace with #$2, so that the hashtag gets added in the proper place:

function formattedTitle(posttitle, hreflink) {
  return `<a href='` + hreflink + `'>`
    + posttitle.replace(/(^|\s)#([-.\w]+)/gi, `$1</a><a class="hashtag" href='/search?q=hashtag:"$2"'>#$2</a><a href='` + hreflink + `'>`)
    + '</a>';
}

console.log(formattedTitle('This is #awesome news', 'google.com'));

user_95152070

You just need to move the hash symbol out of your capture group; doing so will not change the matching semantics. Like so:

function formattedTitle(posttitle, hreflink) {
  return `<a href='`+ hreflink +`'>` + posttitle.replace(/(^|\s)#([-.\w]+)/gi, `$1</a><a class="hashtag" href='/search?q=hashtag:"$2"'>$2</a><a href='`+ hreflink + `'>`) + '</a>';
}
user_81742230

Just add another capturing group so that you get a match with the hashtag (or any other character you'd like to capture) in $2 and another match without the hashtag in $3: (#([-.\w]+)) rather than (#[-.\w]+):

function formattedTitle(postTitle, href) {
  const parts = postTitle.replace(
    /(^|\s)(#([-.\w]+))/gi,
    `$1</a><a class="hashtag" href="/search?q=hashtag:$3">$2</a><a href="${ href }">`);
  
  return `<a href="${ href }">${ parts }</a>`;
}

document.getElementById('postTitle').innerHTML = formattedTitle('This is #awesome news', 'https://google.com');
h3 {
  font-family: monospace;
  font-size: 24px;
  margin: 8px 0;
}

a {
  padding: 8px 0;
  text-decoration: none;
  display: inline-block;
}

.hashtag {
  padding: 6px 8px;
  border: 3px solid blue;
  border-radius: 3px;
  margin: 0 8px;
}
<h3 id="postTitle"></h3>

user_37239930
Related