Javascript 匹配@username和#主题并将结果换行到span中

我正在尝试解析一个原始tweet字符串以匹配@username和#topic部分，我能够匹配它们，但我不知道如何包装它们

我的代码：

"Hey @someotheruser this is a tweet about #topic1 and #topic1".replace(/(^|)@(\w+)/, '<span class="mention">?result of match?</span>');

"Hey @someotheruser this is a tweet about #topic1 and #topic1".replace(/(^|)#(\w+)/, '<span class="hash">?result of match?</span>');

“嘿@someotheruser这是一条关于#主题1和#主题1的推文。替换（/（^ |））@（\w+/，”？匹配结果？）；
“嘿@someotheruser这是一条关于#主题1和#主题1的推文。替换（/（^ |）主题（\w+）/，”？匹配结果？）；

所以我的问题是：如何获得匹配结果，并将其用span包装？

var my_string='Hey@someotheruser这是一条关于#topic1和#topic1'的推文；
var my_string = 'Hey @someotheruser this is a tweet about #topic1 and #topic1';

my_string = my_string.replace(/(\@\w+)/g, '<span>$&</span>');
my_string = my_string.replace(/(\#\w+)/g, '<span>$&</span>');

console.log(my_string);

my_string=my_string.replace（/（\@\w+）/g，$&'）；
my#u string=my#u string.replace（/（\#\w+）/g，$&'）；
console.log（我的字符串）；

输出

Hey <span>@someotheruser</span> this is a tweet about <span>#topic1</span> and <span>#topic1</span>

Hey@someotheruser这是一条关于#主题1和#主题1的推文
var my_string='Hey@someotheruser这是一条关于#topic1和#topic1'的推文；
my_string=my_string.replace（/（\@\w+）/g，$&'）；
my#u string=my#u string.replace（/（\#\w+）/g，$&'）；
console.log（我的字符串）；

输出

Hey <span>@someotheruser</span> this is a tweet about <span>#topic1</span> and <span>#topic1</span>

Hey@someotheruser这是一条关于#主题1和#主题1的推文
一个例子：

myString.replace(/(^|)@(\w+)/g, function handleMatch(match) {
    return '<span class="mention">' + match + '</span>';
})
.replace(/(^|)#(\w+)/g, function handleMatch(match) {
    return '<span class="hash">' + match + '</span>';
});

myString.replace（/（^|））@（\w+）/g，函数handleMatch（匹配）{
返回“”+匹配+“”；
})
.更换（/（^ |）#（\w+）/g，功能手柄匹配（匹配）{
返回“”+匹配+“”；
});
一个例子：

myString.replace(/(^|)@(\w+)/g, function handleMatch(match) {
    return '<span class="mention">' + match + '</span>';
})
.replace(/(^|)#(\w+)/g, function handleMatch(match) {
    return '<span class="hash">' + match + '</span>';
});

myString.replace（/（^|））@（\w+）/g，函数handleMatch（匹配）{
返回“”+匹配+“”；
})
.更换（/（^ |）#（\w+）/g，功能手柄匹配（匹配）{
返回“”+匹配+“”；
});
或者只需这样做：）
/（^ |））（？：（\w+）（？：@（\w+））/g
。编辑我看你刚刚更新了答案。如果您想要不同的类，那么这也很好。但是您无法区分不同的跨类；）编辑：是的，tbh，与其他答案相比有点笨重，但有一个选项：）只是涂鸦，你可以；在你的函数中：）通往罗马的路太多了^^^很好的一点是，有了这个开关，你甚至可以在最后一个
else{}
上报告一个错误，可能会在控制台上写一个错误，因为正则表达式不匹配：）真的！虽然我支持笨重的：对于这样一个简单的任务，预放置函数似乎有点过分（而且速度较慢），或者只是这样做：）
/（^ |））（？：（\w+））（？：@（\w+））/g
。编辑我看你刚刚更新了答案。如果您想要不同的类，那么这也很好。但是您无法区分不同的跨类；）编辑：是的，tbh，与其他答案相比有点笨重，但有一个选项：）只是涂鸦，你可以；在你的函数中：）通往罗马的路太多了^^^很好的一点是，有了这个开关，你甚至可以在最后一个
else{}
上报告一个错误，可能会在控制台上写一个错误，因为正则表达式不匹配：）真的！尽管我支持笨拙：对于这样一个简单的任务来说，预放置函数似乎有点过火（而且速度较慢），但请查看
（^ |）
组的作用是什么？它总是匹配一个空字符串，我也没有回答这个问题；也许OP的意思是没有分组<代码>[^ |]
或
^ |
因此它可能像普通文本的某种转义机制一样。检查
（^ |）组的作用是什么？它总是匹配一个空字符串，我也没有回答这个问题；也许OP的意思是没有分组<代码>[^ |]
或
^ |
，因此它可能像普通文本@和#的某种转义机制。