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