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

我已经成功地使用下面的脚本在文本区域中突出显示预定义文本。

---

如何能够在运行中更改预定义的文本？例如，用户在特定的输入框中输入“绿色”，然后在文本区域中突出显示“绿色单词”？

也许您可以尝试类似的方法

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

---

使用此代码片段，当输入发生更改时（例如，

input text

失去焦点/单击页面上的其他位置时），您可以调用插件。如果愿意，您可以尝试使用

keyup

event

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

我从未使用过您链接到的jQuery插件，但类似的东西应该可以工作：

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

---

这个插件似乎没有“更新”API方法，所以像@F.Calderan所说的，对“更改”事件进行简单的重新初始化应该可以工作。当你点击任何键时，它会重新初始化插件两次吗？我得到了这个解决方案，但它会使键入速度变慢。有人能告诉我什么是卡尔德兰提供的改变方法的错误吗？缓慢的原因是，

keypress

、

keydown

和

keydup

事件使highlightTextarea在每次键盘按下输入字段后重新初始化。事件

change

在将焦点移出输入字段时由火山口触发器演示。它有助于避免打字时的缓慢，但也有一个缺点，即高亮显示无法即时工作。highlightTextarea插件的主要问题是缺少提供快速更新的API方法。

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

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

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