如何让JavaScript对象支持包含式搜索以实现HTML表格模糊查询？

我有一个带搜索功能的HTML表格，目前通过JavaScript对象传递关键词，但该搜索仅支持精确匹配。我希望将其改为包含式匹配，比如输入“A”或“App”就能返回对应结果。示例中，只有输入完整术语“Apple Banana”时才会得到映射后的结果。另外，HTML表格由CMS自动生成，我无法修改它，只能更新JavaScript或CSS文件。相关代码如下：

const obj = {
  'Apple Banana':'ABC',
};
function myFunction() {
  let userInput = document.getElementById("myInput").value;
  if(obj[userInput]) userInput = obj[userInput];
  userInput = userInput.toUpperCase();
  const tableRows = document.querySelectorAll("table tr");
  for (let i = 0; i < tableRows.length; i++) {
    const rowTextContent = tableRows[i].innerText.toUpperCase();
    tableRows[i].style.display = rowTextContent.toUpperCase().includes(userInput) ? "" : "none";
  }
}

table.table_brdr td {
  padding: 8px 10px;
  border: none;
}

table.table_brdr th {
  background-color: #a6a6a6;
  color: black;
}

tr:nth-of-type(odd) {
  background-color#D3D3D3;
}

#myInput {
  background-image: url('/css/searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  width: 20%;
  font-size: 16px;
  padding: 12px 20px 12px 40px;
  border: 1px solid #ddd;
  margin-bottom: 12px;
}

<p><input type="text" id="myInput" onkeyup="myFunction()" placeholder="Search forms list" title="Search forms list"></p>
<table class="table_brdr" id="myTable">
<tr>
<th>Column1</th>
<th><strong>Column2</th>
<th>Column3</th>
</tr>

<tr>
<td>abc</td>
<td>xyz</td>
<td>03/30/2017</td>
</tr>

<tr>
<td>test12</td>
<td>https://www.yahoo.com/ </td>
<td>03/30/2017</td>
</tr>
  
<tr>
<th>Column1</th>
<th> New Column</th>
<th>Column3</th>
</tr>

<tr>
<td>John</td>
<td>abctd <td>
<td>09/30/2019</td>
</tr>
  
<tr>
<th>Column1</th>
<th> New Column2</th>
<th>Column3</th>
</tr>

<tr>
<td>Doe</td>
<td>abctd </td>
<td>06/30/2019</td>
</tr>

</tbody></table>

请问是否有办法让JavaScript对象支持包含式匹配？

当然可以，核心是把原来的精确匹配对象键改成遍历对象键并检查包含关系。修改后的JavaScript代码如下：

const obj = {
  'Apple Banana':'ABC',
};
function myFunction() {
  let userInput = document.getElementById("myInput").value.trim().toUpperCase();
  // 遍历对象所有键，寻找包含用户输入的匹配项
  for (const key of Object.keys(obj)) {
    if (key.toUpperCase().includes(userInput)) {
      userInput = obj[key].toUpperCase();
      break; // 找到第一个匹配项就停止，若需匹配多个键可移除break并合并结果
    }
  }
  const tableRows = document.querySelectorAll("table tr");
  for (let i = 0; i < tableRows.length; i++) {
    const rowTextContent = tableRows[i].innerText.toUpperCase();
    tableRows[i].style.display = rowTextContent.includes(userInput) ? "" : "none";
  }
}

关键修改点： #

1. 统一匹配规则：先将用户输入转大写并去除首尾空格，避免大小写和多余空格影响匹配
2. 包含式匹配对象键：通过Object.keys(obj)遍历所有键，检查每个键的大写版本是否包含用户输入的大写内容
3. 映射值替换：找到匹配键后，将userInput替换为对应的映射值（同样转大写），确保后续行匹配逻辑一致
4. 可选扩展：如果需要支持多个键匹配，可以移除break，将所有匹配的映射值用逻辑符（如||）连接，实现多关键词匹配

另外，你的CSS代码存在一处语法错误，需要修正才能生效：

tr:nth-of-type(odd) {
  background-color: #D3D3D3; /* 补充冒号 */
}

内容的提问来源于stack exchange，提问作者magicsinger