正则表达式疯狂与空间逗号转换

Question

我使用span制作带有标签的输入，就像你在StackOverflow问题中输入标签时可以看到的那样。

HTML：

<div id="tags" contenteditable></div>

使用Javascript：

var t = $("#tags")

t.keyup(function (e) {

    t.html(t.html().replace(/([\w]+) /gi, '$1, ').replace(/([\w]+),/gi, '<span class=tag>$1<a href="#">x</a></span>&nbsp'));

    range = document.createRange(); //Create a range (a range is a like the selection but invisible)
    range.selectNodeContents(t[0]); //Select the entire contents of the element with the range
    range.collapse(false); //collapse the range to the end point. false means collapse to end rather than the start
    selection = window.getSelection(); //get the selection object (allows you to change selection)
    selection.removeAllRanges(); //remove any selections already made
    selection.addRange(range); //make the range you have just created the visible selection
    $("span a").click(function () {
        $(this).parent().remove()
    })
});

它应该将文本后跟逗号转换为<span></span>，然后将任何文本后跟空格转换为文本，后跟逗号。你可以在堆栈溢出中看到相同的内容。

它适用于第一个标签但是当我开始输入第二个标签时，一个混乱确保。说清楚..我首先键入＆＃34; php，＆＃34;（或＆＃34; php＆＃34;）然后它很好地转换为标签（span）。当我开始输入＆＃34; j＆＃34; （＆＃34; javascript＆＃34;）这是它造成的混乱：

我无法理解正则表达式的错误。

t.html(t.html().replace(/([\w]+) /gi, '$1, ').replace(/([\w]+),/gi, '<span class=tag>$1<a href="#">x</a></span>&nbsp'));

它不能很好地运作吗？我做错了什么？

这是JSFiddle