2016-11-22 31 views
-1

我有一个留言箱,并希望在邮件中突出显示一个用户名。上留言是这样的:JavaScript从一个特定的字符串获得一个字符串到一个空间

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

我只想强调在此之后,“@”和文本,以这样的第一空间:“@skuhlight什么你的问题”

在上留言我想补充一个跨度各地的用户名是这样的:

<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)); 
} 
+0

请检查[问]并更新您的问题以包含[mcve]。因为它代表着你的问题,因为你没有显示任何你已经尝试过的代码,所以你把它当作工作单。 – zzzzBov

+1

请发布您到目前为止所尝试的内容。 –

回答

0

试试这个:

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

函数在输入中搜索匹配项,而小代码段将帮助为每个匹配项生成元素。

+0

感谢您的回答!这代替了第一个孩子的DD。所以它不工作..我会编辑我的帖子,以更好地显示即时通讯尝试.. – sKuhLight

相关问题