输入 input/contenteditable 时匹配特定单词

Question

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

我有上面的 div 和下面的 jQuery

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

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

<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!');
    }
});