試圖創造出這樣的東西:

帶有匹配字母標記的列表圖像

大學名單在UI-li名單上， 這是一個搜索收件箱輸入。

我已經嘗試了幾種方法，但我能找到的都是基于定位和/或字符串的第一個或最后一個字母。找不到與職位無關的任何匹配。

安娜，我找到了你問題的答案。

const searchBox = document.getElementById("search-box");
const universities = document.querySelectorAll(".university");

const searchUniversity = () => {
  searchBox.addEventListener("keyup", () => {
    const searchBoxInput = searchBox.value.toLowerCase();
    const noWhiteSpaceInput = searchBoxInput.replace(/\s/g, "");

    universities.forEach((university) => {
      const universityName = university.textContent.toLowerCase().replace(/\s/g, "");

      if (universityName.includes(noWhiteSpaceInput)) {
        university.style.display = "block";
      } else {
        university.style.display = "none";
      }

      const regex = new RegExp(`(${noWhiteSpaceInput})`, "gi");
      const highlightedText = university.textContent.replace(regex, "<span class='highlight'>$1</span>");
      university.innerHTML = highlightedText;
    });
  });
};

searchUniversity();

body {
    margin: 0;
    padding: 0;
    font-family: 'Poppins', sans-serif;
}

*, *::before, ::after {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

main {
    background-color: rgb(255, 255, 255);
    margin: 1.5rem;
    display: flex;
    flex-direction: column;

}

.title {
    text-align: center;
    color: rgb(221, 4, 58);
    font-weight: 600;
    font-family: 'Poppins', sans-serif;
    font-size: 2rem;
    margin-top: 2rem;
}

.search_box {
    display: block;
    width: 100%;
    height: 2rem;
    border-radius: 0.5rem;
    border: 1.5px solid #0000002c;
    margin-top: 2rem;
    outline: none;
    padding: 2px;
}

.world-universities_list {
    background-color: rgb(104, 7, 39);
    color: white;
    padding: 1.5rem;
    border-radius: 1rem;
    margin-top: 3rem;
}

.university:not(.last-u) {
    margin-bottom: 2rem;
}

.highlight {
    background-color: aqua;
    font-weight: bold;
}

<main>
      <input
        type="search"
        name="search_box"
        id="search-box"
        class="search_box"
      />
      <h1 class="title">List of Top 10 World Best Universities</h1>
      <ul class="world-universities_list" id="world-universities_list">
        <li class="university">Massachusetts Institute of Technology (MIT)</li>
        <li class="university">Stanford University</li>
        <li class="university">Harvard University</li>
        <li class="university">California Institute of Technology (Caltech)</li>
        <li class="university">University of Oxford</li>
        <li class="university">University of Aambridge</li>
        <li class="university">University of Chicago</li>
        <li class="university">
          ETH Zurich - Swiss Federal Institute of Technology
        </li>
        <li class="university">University of California, Berkeley (UCB)</li>
        <li class="university">Aalborg University (Denmark)</li>
        <li class="university">Aalto University (Finland)</li>
        <li class="university">Aarhus University (Denmark)</li>
        <li class="university">Abdullah Gül University (Turkey)</li>
        <li class="university">Abertay University (United Kingdom)</li>
        <li class="university">Aberystwyth University (United Kingdom)</li>
        <li class="university">Abia State University (Nigeria)</li>
        <li class="university">Abilene Christian University (United States)</li>
        <li class="university">Adam Mickiewicz University (Poland)</li>
        <li class="university">Addis Ababa University (Ethiopia)</li>
        <li class="university">Adelphi University (United States)</li>
        <li class="university last-u">Princeton University</li>
      </ul>
    </main>