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

【问题标题】：javascript how to regex match and replace on hashtags but exclude the hashtag characterjavascript如何在主题标签上进行正则表达式匹配和替换，但排除主题标签字符
【发布时间】：2020-02-23 09:10:35
【问题描述】：

我有以下功能：

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

它输出：

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

注意它是如何在 $2 匹配中包含“#”的。如何排除 hashtag: 属性中的主题标签字符，但将其保留在 href 值之间？

所以输出应该是这样的：

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

我已经能够通过对整个事物进行另一次替换以将 '/search?q=hashtag:"# 替换为 '/search?q=hashtag:" 来使其工作，但我想知道是否可以不进行第二次替换？

【问题讨论】：

标签： javascript node.js regex regex-lookarounds

【解决方案1】：

将# 移到捕获的第二组之外，因此它不会被捕获。替换时，在href 中，仅替换为$2（所以没有标签）。当替换<a> 中的文本时，替换为#$2，以便将主题标签添加到正确的位置：

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

【讨论】：

没想到会这么简单！谢谢，完美运行！

【解决方案2】：

您只需要将井号移出捕获组即可；这样做不会改变匹配的语义。像这样：

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

【讨论】：

【解决方案3】：

只需添加另一个捕获组，以便您在$2 中获得与主题标签（或您想要捕获的任何其他字符）的匹配，以及在$3 中获得另一个没有主题标签的匹配：(#([-.\w]+)) 而不是@ 987654324@:

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

&lt;h3 id="postTitle"&gt;&lt;/h3&gt;

【讨论】：