contenteditable div 中的正则表达式主题标签无法正常工作

Question

如何在用户键入时将内容可编辑 div 中以 # 字符开头的所有单词的颜色更改为蓝色。它现在所做的就是为所有匹配着色，但前提是它们出现在不匹配的单词之后。像这样：

#liferandomness #deathmore nothing #trees

但这不起作用：

我吃了一个苹果#yum#doctoraway#healthy#diet

这是一个小提琴： http://jsfiddle.net/GEm75/

我现在的做法是将每个匹配项包装在一个跨度中，然后使用 css 对其进行样式设置。我遇到了一个问题，主题标签后的不匹配文本仍然与主题标签颜色相同。我解决了这个问题，但效率很低，我非常想要一个替代方案。 这是我的代码：

<div id="box" style="border: 1px solid black; height: 10em" contenteditable="true">
</div>

function placeCaretAtEnd(el) {
el.focus();
if (typeof window.getSelection != "undefined"
    && typeof document.createRange != "undefined") {
    var range = document.createRange();
    range.selectNodeContents(el);
    range.collapse(false);
    var sel = window.getSelection();
    sel.removeAllRanges();
    sel.addRange(range);
} else if (typeof document.body.createTextRange != "undefined") {
        var textRange = document.body.createTextRange();
        textRange.moveToElementText(el);
        textRange.collapse(false);
        textRange.select();
    }
}

var inp = $('#box');
//select the box div
var text = '';
//#box's default value
inp.on('keyup', function(e) {
    text = inp.html();
    var matches_hash = text.match(/(^|\s)#(\w+)/g);
    if (matches_hash) {
        text = text.replace(/(^|\s)#(\w+)/g, "</span><span class='hashtag'> #$2</span><span class='else'>");
        inp.html(text);
        placeCaretAtEnd(document.getElementById('box'));
    }
});
</script>

我想知道是否有更有效的方法来做到这一点。还有主题标签必须用非主题标签文本分隔的问题。我通过一个正则表达式测试器运行了我的正则表达式，它运行良好。

http://regex101.com/r/iF3iZ8

函数placeCaretAtEnd(el) 是别人做的，我没做。但它所做的只是将插入符号放在可编辑 div 的末尾。

如果你有任何问题，请给我留言

请帮帮我。

Answer 1

有很多方法可以做到这一点，但这是一种方法背后的想法。希望它能让您的创意源源不断。

设置一个关系数据库（可能是MySQL）并创建一个post 表来存储帖子。假设post 表有这些字段：

integer unsigned auto increment primary key id
timestamp posted
integer unsigned user_id
text comment

现在，您需要创建另一个表来存储主题标签。让我们称之为hashtag 并使用这个结构：

integer unsigned auto increment primary key id
integer unsigned post_id
text tag

hashtag 表中的post_id 会将您指向主题标签所属的post 行。现在，在 MySQL 中，您可以运行以下查询：

SELECT post.* FROM hashtag LEFT JOIN post ON post.id = post_id WHERE tag = "life"

此查询将获取所有带有“生活”主题标签的帖子。