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

Question

我有这个小提琴显示我想要做什么。基本上，我想在输入某些单词时为我的文本设置样式。这种样式将通知用户他们用于构建查询的语法是正确的。

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

结果：

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