Question

$("#idofreplybox").on('keyup, keydown',function(){
    var e = $(this).html();
    if (e.indexOf(@) !== -1){}else{
        var d = find all occurences of @
        var f = find the next whitespace after that @
        change the text between var d and var f to blue
    }
});

使用此代码，当某人键入@steve时，他们的名字应该变为蓝色。但是我不确定我需要将我的代码块中的文本更改为javascript代码的正则表达式。

很抱歉，如果这对你来说很明显，但我是一个正常的表达菜鸟，所以我无法解决我需要写的东西。

任何帮助都将不胜感激。

Answer 1

使用\b作为字边界。

例如：

"test @username bla bla".replace(/@(\w+)\b/g, "<span class=user>$1</span>")

给出

"test <span class=user>username</span> bla bla"

Answer 2

使用@ dystroy的正则表达式：

    (function($){
$("#idofreplybox").keyup(function(){
    var e = $(this).html();

    if (e.length && /@(\w+)\b/.test(e)){
        e = e.replace(/@(\w+)\b/g, '<span style="color: blue;">$1</span>');
        $(this).html(e);
    } else {

    }
});}
)(jQuery);

但请注意，您无法在文本框中使用html，使用内容可编辑元素或代理/虚拟，它将充当文本框并将内容/ html复制到div。

Working fiddle

$ 1表示第一个paranthesis（）匹配，$ 2表示第二个，依此类推

正则表达式查找所有出现的字符串然后找到它后面的下一个空格

2 个答案: