如何让Electron项目中的搜索函数实现大小写不敏感？

我太懂你在Electron项目里遇到的这个搜索大小写困扰了！你做了一个从数据库拉取数据填充表格的搜索功能，支持name、lastname、ID、email等字段检索，但文本类字段（比如姓名）的搜索会因为大小写不匹配找不到结果，对吧？

初始代码问题分析 #

先看你的初始实现代码：

function buscar() { 
  var busqueda = document.getElementById("busqueda").value; 
  con.query("SELECT * FROM candidata", function (err, result, fields) { 
    if (err) console.log(err); 
    var tam = result.length; 
    var text; 
    for (i = 0; i < tam; i++) { 
      if((busqueda == result[i].nom_can) || (busqueda == result[i].ci_can) || (busqueda == result[i].ape_can) || (busqueda == result[i].ocu_can) || (busqueda == result[i].email_can) || (busqueda == result[i].mun_can) || ((busqueda == result[i].nom_can+" "+result[i].ape_can))) { 
        text += '<tbody>'; 
        text += '<tr>'; 
        text += '<td>'; 
        text += result[i].ci_can; 
        text += '</td>'; 
        text += '\t\t'; 
        text += '<td>'; 
        text += result[i].nom_can; 
        text += ' '; 
        text += result[i].ape_can; 
        text += '</td>'; 
        text += '\t\t'; 
        text += '<td>'; 
        text += result[i].fky_cat; 
        text += '</td>'; 
        text += '\t\t'; 
        text += '<td>'; 
        text += result[i].mun_can; 
        text += '</td>'; 
        text += '\t\t'; 
        text += '<td>'; 
        text += result[i].est_can; 
        text += '</td>'; 
        text += '\t\t'; 
        text += '<td>'; 
        text += '</td>'; 
        text += '</tr>'; 
        text += '</tbody>'; 
      } 
      document.getElementById("find").innerHTML= text; 
    } 
  }); 
}

你之前尝试把busqueda转成小写但没生效的原因很明确：只转了搜索关键词，却没把数据库返回的字段值也转成相同大小写再对比。比如搜索"jesus"，数据库里是"Jesús"，"jesus" == "Jesús"还是不成立，自然搜不到结果。

你的解决方案（可行但可优化） #

你后来调整的代码确实解决了问题，通过同时对比原字段值和转小写后的字段值，覆盖了大小写不同的情况：

function buscar() { 
  var busqueda = document.getElementById("busqueda").value; 
  con.query("SELECT * FROM candidata", function (err, result, fields) { 
    if (err) console.log(err); 
    var tam = result.length; 
    var text; 
    for (i = 0; i < tam; i++) { 
      if ( (busqueda == result[i].nom_can.toLowerCase()) || (busqueda == result[i].nom_can) || (busqueda == result[i].ci_can) || (busqueda == result[i].ape_can.toLowerCase()) || (busqueda == result[i].ape_can) || (busqueda == result[i].ocu_can.toLowerCase()) || (busqueda == result[i].ocu_can) || (busqueda == result[i].email_can.toLowerCase()) || (busqueda == result[i].email_can) || (busqueda == result[i].mun_can.toLowerCase()) || (busqueda == result[i].mun_can) || ((busqueda == result[i].nom_can.toLowerCase()+" "+result[i].ape_can.toLowerCase())) || ((busqueda == result[i].nom_can+" "+result[i].ape_can)) ) { 
        text += '<tbody>'; 
        text += '<tr>'; 
        text += '<td>'; 
        text += result[i].ci_can; 
        text += '</td>'; 
        text += '\t\t'; 
        text += '<td>'; 
        text += result[i].nom_can; 
        text += ' '; 
        text += result[i].ape_can; 
        text += '</td>'; 
        text += '\t\t'; 
        text += '<td>'; 
        text += result[i].fky_cat; 
        text += '</td>'; 
        text += '\t\t'; 
        text += '<td>'; 
        text += result[i].mun_can; 
        text += '</td>'; 
        text += '\t\t'; 
        text += '<td>'; 
        text += result[i].est_can; 
        text += '</td>'; 
        text += '\t\t'; 
        text += '<td>'; 
        text += '</td>'; 
        text += '</tr>'; 
        text += '</tbody>'; 
      } 
      document.getElementById("find").innerHTML= text; 
    } 
  }); 
}

不过这个写法重复代码太多，维护起来有点麻烦，给你几个优化方向：

优化建议 #

1. 统一大小写对比，简化条件
   把搜索关键词和所有文本字段都转成小写（或大写）再对比，不用写两次重复条件：

function buscar() { 
  var busqueda = document.getElementById("busqueda").value.toLowerCase(); // 统一转小写
  con.query("SELECT * FROM candidata", function (err, result, fields) { 
    if (err) console.log(err); 
    var tam = result.length; 
    var text = ''; // 初始化text，避免出现undefined
    text += '<tbody>'; // 只生成一次tbody标签
    for (let i = 0; i < tam; i++) { 
      const item = result[i];
      // 所有文本字段转小写后对比
      const fullName = `${item.nom_can.toLowerCase()} ${item.ape_can.toLowerCase()}`;
      if (busqueda === item.nom_can.toLowerCase() || 
          busqueda === item.ci_can || 
          busqueda === item.ape_can.toLowerCase() || 
          busqueda === item.ocu_can.toLowerCase() || 
          busqueda === item.email_can.toLowerCase() || 
          busqueda === item.mun_can.toLowerCase() || 
          busqueda === fullName) { 
        text += '<tr>'; 
        text += `<td>${item.ci_can}</td>`; 
        text += `<td>${item.nom_can} ${item.ape_can}</td>`; 
        text += `<td>${item.fky_cat}</td>`; 
        text += `<td>${item.mun_can}</td>`; 
        text += `<td>${item.est_can}</td>`; 
        text += '<td></td>'; 
        text += '</tr>'; 
      } 
    }
    text += '</tbody>'; // 闭合tbody标签
    document.getElementById("find").innerHTML = text; 
  }); 
}

2. 在SQL层做大小写不敏感搜索（更高效）
   现在的写法是拉取所有数据库数据到前端再过滤，数据量大的时候性能会受影响。可以直接在SQL查询里用LOWER()函数做匹配，只返回符合条件的数据，还能避免SQL注入：

function buscar() { 
  var busqueda = document.getElementById("busqueda").value; 
  // 参数化查询避免SQL注入风险
  const query = `
    SELECT * FROM candidata 
    WHERE LOWER(nom_can) = LOWER(?) 
       OR ci_can = ? 
       OR LOWER(ape_can) = LOWER(?) 
       OR LOWER(ocu_can) = LOWER(?) 
       OR LOWER(email_can) = LOWER(?) 
       OR LOWER(mun_can) = LOWER(?) 
       OR LOWER(CONCAT(nom_can, ' ', ape_can)) = LOWER(?)
  `;
  con.query(query, [busqueda, busqueda, busqueda, busqueda, busqueda, busqueda, busqueda], function (err, result, fields) { 
    if (err) console.log(err); 
    var text = '<tbody>'; 
    result.forEach(item => {
      text += '<tr>'; 
      text += `<td>${item.ci_can}</td>`; 
      text += `<td>${item.nom_can} ${item.ape_can}</td>`; 
      text += `<td>${item.fky_cat}</td>`; 
      text += `<td>${item.mun_can}</td>`; 
      text += `<td>${item.est_can}</td>`; 
      text += '<td></td>'; 
      text += '</tr>'; 
    });
    text += '</tbody>'; 
    document.getElementById("find").innerHTML = text; 
  }); 
}

这样不仅减少了前端的计算量，还降低了数据库传输的数据量，更高效也更安全。

3. 修复HTML结构问题
   你的原代码里每次循环都拼接<tbody>，会生成多个<tbody>标签，不符合HTML规范，优化后的代码把<tbody>放在循环外面，只生成一次，结构更合理。

内容的提问来源于stack exchange，提问作者Jesús Ramírez