Question

我有一个令人满意的div，我希望这样做，以便当用户键入主题标签时，该主题标签和下一个空格之间的所有内容都将包含在

中

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

例如，如果用户输入“嗨，我的名字是john #sweaters是一件很酷的衣服”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\"/>');
 });

Answer 1

我试图明白你的意思，虽然我不明白为什么你消失了“毛衣”并把标签放到“约翰”，但是，假设你有这个：

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

jQuery正则表达式标记包

1 个答案: