时间戳

首页 > 解决方案 > 在txt文件中查找一个单词并得到定义（txt文件中的定义）

html - 在txt文件中查找一个单词并得到定义（txt文件中的定义）

问题描述

我有一个 txt 文档，首先是定义，然后是含义；介于两者之间：

Apple;blabla. Pear; blah blah. Banana; blahblie.

现在我想写的是，如果您在“Apple”上的 html 文件中搜索输入，您将找到“blabla”。但我不知道哪个程序我会做得最好以及如何做？

标签： htmlinput

解决方案

看看这个

您需要加载文件。您可以为此使用 fetch

const defFile = `Apple;blabla. Pear; blah blah. Banana; blahblie.`
const pairs = defFile.match(/([a-zA-Z0-9_ ]+)+; ?([a-zA-Z0-9_ ]+)+\./g)
const dl = document.getElementById("def")
const search = document.getElementById("search");
dl.innerHTML = pairs.map(pair => {
  const [dd, dt] = pair.split(";")
  return `<dd class="hide">${dd.trim()}</dd><dt  class="hide">${dt.trim()}</dt>`
}).join("");

search.addEventListener("input", function() {
  const s = this.value.toLowerCase();
  const dds = dl.querySelectorAll("dd");
  dds.forEach(dd => {
    const show = s && dd.textContent.toLowerCase().includes(s);
    dd.classList.toggle("hide", !show)
    dd.nextElementSibling.classList.toggle("hide", !show)
  })
})
.hide {
  display: none
}
<input type="text" id="search" autocomplete="off" />
<dl id="def"></dl>

推荐阅读