JavaScript获取从特定字符到空格的字符串

我有一个shoutbox，希望在消息中突出显示用户名。Shoutbox如下所示：

<dl id="sbPosts">
                <dt data-id="1780530" data-user="username">
                    <a href="user/username" class="user">username</a>
                    <time>00:00:00</time>
                </dt>
                <dd data-id="1780530" data-user="username">
                    @username text without highlight
                </dd>
                <dt data-id="1780530" data-user="username">
                    <a href="user/username" class="user">username</a>
                    <time>00:00:00</time>
                </dt>
                <dd data-id="1780530" data-user="username">
                    @username text without highlight
                </dd>
                <dt data-id="1780530" data-user="username">
                    <a href="user/username" class="user">username</a>
                    <time>00:00:00</time>
                </dt>
                <dd data-id="1780530" data-user="username">
                    @username text without highlight
                </dd>
                <dt data-id="1780530" data-user="username">
                    <a href="user/username" class="user">username</a>
                    <time>00:00:00</time>
                </dt>
                <dd data-id="1780530" data-user="username">
                    @username text without highlight
                </dd>
</dl>

<dd data-id="1780530" data-user="username">
    <span class="highlight">@username</span> text without highlight
</dd>

00:00:00
@没有突出显示的用户名文本
00:00:00
@没有突出显示的用户名文本
00:00:00
@没有突出显示的用户名文本
00:00:00
@没有突出显示的用户名文本

我只想在第一个空格中突出显示“@”和后面的文本，如下所示：“@skullight你的问题是什么？”

在shoutbox中，我想在用户名周围添加一个span，如下所示：

<dl id="sbPosts">
                <dt data-id="1780530" data-user="username">
                    <a href="user/username" class="user">username</a>
                    <time>00:00:00</time>
                </dt>
                <dd data-id="1780530" data-user="username">
                    @username text without highlight
                </dd>
                <dt data-id="1780530" data-user="username">
                    <a href="user/username" class="user">username</a>
                    <time>00:00:00</time>
                </dt>
                <dd data-id="1780530" data-user="username">
                    @username text without highlight
                </dd>
                <dt data-id="1780530" data-user="username">
                    <a href="user/username" class="user">username</a>
                    <time>00:00:00</time>
                </dt>
                <dd data-id="1780530" data-user="username">
                    @username text without highlight
                </dd>
                <dt data-id="1780530" data-user="username">
                    <a href="user/username" class="user">username</a>
                    <time>00:00:00</time>
                </dt>
                <dd data-id="1780530" data-user="username">
                    @username text without highlight
                </dd>
</dl>

<dd data-id="1780530" data-user="username">
    <span class="highlight">@username</span> text without highlight
</dd>

@没有突出显示的用户名文本

这是我试过的代码

  function highlight(username) {
  var element = $('#sbPosts > dd');
  var rgxp = new RegExp(username, '@');
  var res = str.substr(username, ' ');
  var repl = '<dd><span class="highlight">' + username + '</span>';
  element.html(element.html().replace(username, repl));
}

函数突出显示（用户名）{
变量元素=$（'sbPosts>dd'）；
var rgxp=新的RegExp（用户名“@”）；
var res=str.substr（用户名“”）；
var repl=''+用户名+''；
html（element.html（）.replace（username，repl））；
}

试试这个：

function getMatches(input){
    var patt = /@\w+/g;
    return input.match(patt);
}

var arr = getMatches("@paper asdsdsds");
var element = $('#sbPosts > dd');
for(var i = 0; i < arr.length; i++){
    var txt = arr[i]; // Text to go inside <span>

    element.html(element.html().replace(txt, '<span class="highlight">' + txt + '</span>'));
}

函数getMatches（输入）{ var patt=/@\w+/g； 返回输入匹配（patt）； } var arr=getMatches（“@paper-asdsds”）； 变量元素=$（'sbPosts>dd'）； 对于（变量i=0；i

---

该函数将搜索输入中的匹配项，小片段将有助于为每个匹配项生成元素。

请查看并更新您的问题，以包含匹配项。目前，您的问题读作工作指令，因为您尚未显示任何您尝试过的代码。请发布您迄今为止尝试过的代码。感谢您的回答！这将用第一个子dd替换ever dd。因此它不起作用。。我将编辑我的帖子，以更好地展示我的努力。。