0

我有一个内容可编辑的 div,我想在其中制作它,以便当用户输入主题标签时,该主题标签和下一个空格之间的所有内容都将被包裹在

<span class="tag"></span>

例如,如果用户输入“嗨,我的名字是约翰#毛衣是一件很酷的衣服”,那么 html 会显示

 hi my name is <span class="tag">#john</span> are a cool article of clothing

到目前为止,我的 javascript 中有这个,但我想不知道从这里去哪里

$('.post_box').keydown(function(){
    var note = $(this).html();
    var hashtagPattern = /[#]/i;
    var spacePattern = /[ ]/i;
        // find hashtag
        // find space
        // get stuff between them
        var tag = stuff between them;
        tag.wrap('<span class=\"tag\" contenteditable=\"false\"/>');
 });
4

1 回答 1

0

我试图理解你的意思,虽然我不明白你为什么消失了“毛衣”并将标签放在“约翰”,但是,假设你有这个:

hi my name is john are a cool article of clothing

有人在“john”上添加了一个标签,如下所示:

hi my name is #john are a cool article of clothing

html应该是这样的:

hi my name is <span class="tag">#john</span> are a cool article of clothing

我修改了你的脚本

$('.post_box').keyup(function(){
var note = $(this).html(), pattern = /\s\#[A-Za-z0-9]+\s/gi, tag;
while(tag = pattern.exec(note)){
note = note.replace(tag.toString(),' <span class=\"tag\" contenteditable=\"false\">'+$.trim(tag.toString())+'</span> ');
}
$(this).html("");
$(this).html(note);
});​

如果你注意到这一行:

note = note.replace(tag.toString(),' <span class=\"tag\" contenteditable=\"false\">'+$.trim(tag.toString())+'</span> ');

您会意识到这是在 .

你可以在这里找到测试代码TEST

于 2012-08-04T20:59:56.980 回答