如何检查输入字符串是否包含与Javascript中API信息匹配的单词?

Question

预期结果:用户从键盘输入任意字符。然后，它们将用于检查输入的字符串是否是来自Dictionary API的单词。如果它们相互匹配，则字符串将位于<p>元素中。如果不是，则输入的字符串将经过anotherFunction()。

问题:

1. 是否可能通过keyboard.event，但不是在<input>/<textarea>中，fetchApi()能够从字符串中搜索一个真实的单词，而不是每个输入的字符?(就像我不希望这样，直到用户输入单词并按下Enter，然后API开始启动)
2. 如果是这样，我可以在代码中改变什么，以获得上述预期的结果?

再次感谢您。非常感谢!

var characters = '';
var text = document.getElementById("text");
var word = result[arg0].word;
document.addEventListener('keydown', function(input) {
if (input.key >= 'a' && input.key <= 'z') {
fetchApi(input.key);
}
});
function fetchApi(word) {
let url = `https://api.dictionaryapi.dev/api/v2/entries/en/${word}`;
fetch(url).then(res => res.json()).then(result => data(result, word));
}
function data(result, word) {
if (input.key == word) {
characters += input.key;
text.innerHTML = characters;
}
else {
text.innerHTML = anotherFunction();
}
}

<p id="text"></p>

Answer 1

我希望我理解你的问题是正确的，但我认为你想要的是:

1. 只监听输入字段中的关键事件，而不监听整个文档。为此，只需将事件侦听器添加到所需的<input>或<textarea>，而不是document。这里解释

text.addEventListener('keydown', function(input) {
if (input.key >= 'a' && input.key <= 'z') {
fetchApi(input.key);
}
});

2. 您也可以监听Enter键。为此，您可以简单地获取<input>的值并将其直接发送给API (text.value)。或如果你想过滤字符之前(并改变尽可能少的代码从你现有的解决方案)，你也可以发送你的characters字符串给它。(如下面代码)

let inputWord = ""
text.addEventListener('keydown', function(input) {
if (input.key >= 'a' && input.key <= 'z') {
inputWord += input.key; // add each character to string if it's between a-z
} else if (input.key === "Enter") { // on enter fetch the entire inputWord
fetchApi(inputWord);
inputWord = "" // clear inputWord after Enter (but not in <input>)
}
});