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

Question

我有以下功能：

function formattedTitle(posttitle,hreflink) {
  return `<a href='`+ hreflink +`'>` + posttitle.replace(/(^|\s)(#[-.\w]+)/gi, `</a><a class="hashtag" href='/search?q=hashtag:""'></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, `</a><a class="hashtag" href='/search?q=hashtag:""'></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:"，但我想知道是否可以不进行第二次替换？

Answer 1

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

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

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

Answer 2

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

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

Answer 3

只需添加另一个捕获组，这样您就可以在 </code> 中获得与主题标签（或您想要捕获的任何其他字符）的匹配项，并在 <code> 中获得另一个没有主题标签的匹配项： (#([-.\w]+)) 而不是 (#[-.\w]+):

function formattedTitle(postTitle, href) {
  const parts = postTitle.replace(
    /(^|\s)(#([-.\w]+))/gi,
    `</a><a class="hashtag" href="/search?q=hashtag:"></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>

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

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

javascript

regex

node.js

regex-lookarounds