在输入/ contenteditable中输入时匹配特定单词

Question

<div id="text" contenteditable="true"></div>

我有上面的div和下面的jQuery

$('#text').on('input', function() {
    if($(this).text() == 'banana') {
        alert('banana!');
    }
});

我需要在每次输入内容时搜索 #text 的值/文本，检查是否可以找到“banana”。现在它警告你是否只输入了“香蕉”，但我需要它来搜索所有内容，即使在那里输入了其他内容......例如：

<div id="text" contenteditable="true">
    damn, that's a tasty banana!
</div>

它应该检测到“香蕉”。

此外，我需要在某些东西中包裹（而不是警告）“香蕉”，例如跨度。有什么想法吗？所以最终结果应该是这样的：

<div id="text" contenteditable="true">
    damn, that's a tasty <span>banana</span>!
    and it even works with multiple <span>banana</span>s
</div>

Answer 1

试试这个：

Fiddle

上的演示

HTML：

<div id="text" contenteditable="true">D</div>

的JavaScript：

$('#text').on('input', function() {
    var text = $(this).text();
    if($(this).text().match('banana') == 'banana') {
        alert('banana!');
    }
});