javascript 如何在主题标签上进行正则表达式匹配和替换，但排除主题标签字符

Question

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?

Answer 1

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

Answer 2

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

Answer 3

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>