当我用 jquery 在可编辑的 div 中编写时，实时样式

Question

我已经 this fiddle 展示了我想要做什么。 基本上，我想在输入某些单词时为我的文本设置样式。这种样式将告知用户他们用于构建查询的语法是正确的。

$(function () {
$('.textarea').focus();
$('.textarea').keyup(function () {
    var a = $(this).text().split(" ").join("</span> <span>");
    a = "<span>" + a + "</span>";
    $('.result').html(a);

    $('.result').find(":contains('where')").addClass('where marker').next().addClass('where value');
    $('.result').find(":contains('since')").addClass('since marker').next().addClass('since value');
});
});


// try writing 'hero where London since 2008' in textarea

它在另一个 div 中工作（结果），但我真正想要的是样式输出与我编写的 div 相同（textarea），

任何人都可以看看它并提供帮助吗？ 谢谢

Answer 1

看看你的小提琴，我将它设置为使用 jQuery 1.9 并放入你的代码和一些 HTML/CSS，它似乎在做你想做的事。

HTML：

<div class="textarea" contenteditable></div>
<div class="result"></div>

CSS：

.textarea {
    min-height: 20px;
    background-color: black;
    color: white;
}
.marker {
    color: red;
}

.value {
    color: blue;
}

JS：

$('.textarea').keyup(function () {
    var a = $(this).text().split(" ").join("</span> <span>");
    a = "<span>" + a + "</span>";
    $('.result').html(a);

    $('.result').find(":contains('where')").addClass('where marker').next().addClass('where value');
    $('.result').find(":contains('since')").addClass('since marker').next().addClass('since value');
});

结果：

这是您想要发生的事情，还是应该有所不同？