javascript - 根据用户给定的关键字突出显示文本区域

Question

我已经成功地使用下面的脚本来获得在 textarea 中突出显示的预定义文本。 http://www.strangeplanet.fr/work/jquery-highlighttextarea/

如何动态更改预定义的文本？例如，用户在特定输入框中输入“绿色”，然后在 textarea 中突出显示“绿色单词”？

Answer 1

也许你可以尝试类似

<input type="text" id="wordtohighlight">
<textarea>lorem ipsum green sit dolor amet green</textarea>

JS/jQuery

$('#wordtohighlight').on('change', function() {
    var v = $(this).val();
    $("textarea").highlightTextarea({
         words: [v]
    });
}

使用此代码段，您可以在输入更改时调用插件（例如，当input text失去焦点/您单击页面上的其他位置时）。如果您愿意，可以尝试使用keyup事件

Answer 2

挂钩输入框的keydown事件并更改单词数组。

我从来没有使用过你链接到的 jQuery 插件，但是这样的东西应该可以工作：

$("#target").keydown (function () {
    $("textarea").highlightTextarea({
          words: [$(this).val()]
    });
});

Answer 3

$("#input-id").bind('keypress',function () {
    var word = $(this).val();
    if (word) {
        $("textarea").highlightTextarea({
            words: [word]
        });
    }
});

Answer 4

$("#input-id").keydown (function () {
    var word = $(this).val();
    if (word) {
        word += '-words';
        $("textarea").highlightTextarea({
            words: [word]
        });
    }
});