字符串返回图片中每个字母的HTML搜索栏

Question

首先，我想对这个问题措辞不佳表示歉意。我不经常使用HTML，但发现它对于搜索我创建的抽认卡的gif非常有价值。

任何有经验的用户，请根据需要解决我的问题！

问题：

我有一个当前页面，该页面的文字指向图片。可以完成4000多个字符。

Code Example

Website View

当我按下汉字时，它将打开对应于该字符的gif。然后，我可以为我的抽认卡复制并粘贴gif。如果我要制作一个更长的单词抽认卡，这将是一个漫长的过程，我需要搜索（Ctrl + F）并分别复制每个字符。

Image opened from Hyperlink

我要创建的是网页顶部的搜索栏，它允许我创建更长的字符串，例如“你好吗”，该字符串将为搜索栏下方的每个字符返回三个对应的gif。 / p>

Concept example

非常感谢您的帮助！

UPDATE: This is my current code: https://pastebin.com/wsVbAmYG

〜sasuke

Answer 1

编辑

使用您的代码，我可以看到图像名称与unicode字符匹配。不再需要桌子。

const resultContainer = document.getElementById('result');
const searchInput = document.getElementById('search');
searchInput.addEventListener('input', (event) => {

  let html = '';

  const string = searchInput.value;
  for(let i = 0, iEnd = string.length; i < iEnd; i++) {
    const car = string.charAt(i);
    let hex = car.charCodeAt(0).toString(16);
    while (hex.length < 4) {
        hex = "0" + hex;
    }
    html += '<image src="images/' + hex + '.gif" alt="' + car + '" />';
  }

  resultContainer.innerHTML = html;

}, false);

<input type="search" id="search" />
<div id="result"></div>

旧答案

首先，如何生成页面？如果您有对应表，那可能还不错。

例如： {     '吗'：'images / 4678.gif'，     '你'：'images / 3579.gif'

}

如果没有对应表并且它是静态页面，则必须创建一个（在代码中为示例）。

然后我们获得链并进行转换。

const list = document.getElementById('list');
const links = list.getElementsByTagName('a');

const correspondence = {};
for(let i = 0, iEnd = links.length; i < iEnd; i++) {
  const link = links[i];
  const car = link.innerHTML.trim();
  const image = link.getAttribute('href');
  correspondence[car] = image;
}

console.log(correspondence);


const resultContainer = document.getElementById('result');
const searchInput = document.getElementById('search');
searchInput.addEventListener('input', (event) => {

  let html = '';

  const string = searchInput.value;
  for(let i = 0, iEnd = string.length; i < iEnd; i++) {
    const car = string.charAt(i);

    if(correspondence[car]) {
      html += '<image src="' + correspondence[car] + '" alt="' + car + '" />';
    } else {
      html += ' ?' + car;
    }


  }

  resultContainer.innerHTML = html;

}, false);

<div id="list">
  <a href="images/4556.gif">啊</a><br />
  <a href="images/4557.gif">爱</a><br />
  <a href="images/4558.gif">安</a><br />
  <a href="images/4559.gif">暗</a><br />
  <a href="images/4560.gif">按</a><br />
</div>

<input type="search" id="search" />
<div id="result"></div>