javascript - 如何仅在数组中完全匹配时执行代码

Question

我正在尝试为论坛的线程和用户创建一个小型过滤器，但我无法使其仅在完全匹配的情况下运行，例如我想过滤“汽车”，但它也过滤包含以下内容的所有单词“汽车”为“卡通”等

我准备了一个示例线程列表:

var Usuarios = ["i want to select this", "this", "||"];
//I also need to use special characters

var Filtrar = document.querySelectorAll('span[onclick*="member.php?u="]');
for (var i = 0; i < Filtrar.length; i++) {
  checkToBlock(Filtrar[i], "textContent");
}
function checkToBlock(obj, namePropText) {
  var text = obj[namePropText];
  for (var i = 0; i < Usuarios.length; i++) {
    if (text.toLowerCase().indexOf(Usuarios[i].toLowerCase()) !== -1) {
      obj.closest("tr").style.opacity = ".5";
    }
  }
}

body {
  margin: 32px;
}
a:link {
  color: #cc3300;
  text-decoration: none;
}
a:visited {
  color: #cc3300;
  text-decoration: none;
}
a:hover, a:active {
  color: #330099;
  text-decoration: underline;
}

td {
  font: 10pt verdana;
}
.tborder {
  background: #D1D1D1;
  color: #000000;
  border: 0px solid #a1a1a1;
}
.alt1 {
  background: #F1F1F1;
  color: #000000;
}

.smallfont {
  font: 11px verdana;
}

<table class="tborder" id="threadslist" width="100%" cellspacing="1" cellpadding="5" border="0" align="center">
  <tbody id="threadbits_forum_12">
    <tr>
      <td class="alt1" id="td_threadtitle_0001" title="">
        <div>
          <a href="showthread.php?t=0001" id="thread_title_0001">Example for special characters</a>
        </div>
        <div class="smallfont">
          <span style="cursor:pointer" onclick="window.open('member.php?u=100', '_self')">Tro||</span>
        </div>
      </td>
    </tr>
    <tr>
      <td class="alt1" id="td_threadtitle_0002" title="">
        <div>
          <a href="showthread.php?t=0002" id="thread_title_0002">Just a thread</a>
        </div>
        <div class="smallfont">
          <span style="cursor:pointer" onclick="window.open('member.php?u=100', '_self')">I want to select this</span>
        </div>
      </td>
    </tr>
    <tr>
      <td class="alt1" id="td_threadtitle_0003" title="">
        <div>
          <a href="showthread.php?t=0003" id="thread_title_0003">And</a>
        </div>
        <div class="smallfont">
          <span style="cursor:pointer" onclick="window.open('member.php?u=200', '_self')">this</span>
        </div>
      </td>
    </tr>
    <tr>
      <td class="alt1" id="td_threadtitle_0004" title="">
        <div>
          <a href="showthread.php?t=0004" id="thread_title_0004">Another thread</a>
        </div>
        <div class="smallfont">
          <span style="cursor:pointer" onclick="window.open('member.php?u=200', '_self')">NOT THIS</span>
        </div>
      </td>
    </tr>
    <tr>
      <td class="alt1" id="td_threadtitle_0005" title="">
        <div>
          <a href="showthread.php?t=0005" id="thread_title_0005">Intresting thread</a>
        </div>
        <div class="smallfont">
          <span style="cursor:pointer" onclick="window.open('member.php?u=300', '_self')">That guy</span>
        </div>
      </td>
    </tr>

    
    
    
  </tbody>
  
</table>

Answer 1

我想你只是想改变这个，它测试“is Usuarios[i] in text”:

if (text.toLowerCase().indexOf(Usuarios[i].toLowerCase()) !== -1) {

对此，它测试“是否text等于Usarios[i]”:

if (text.toLowerCase() === Usuarios[i].toLowerCase()) {

这是您的代码片段中的修复:

var Usuarios = ["i want to select this", "this", "||"];
//I also need to use special characters

var Filtrar = document.querySelectorAll('span[onclick*="member.php?u="]');
for (var i = 0; i < Filtrar.length; i++) {
  checkToBlock(Filtrar[i], "textContent");
}
function checkToBlock(obj, namePropText) {
  var text = obj[namePropText];
  for (var i = 0; i < Usuarios.length; i++) {
    if (text.toLowerCase() === Usuarios[i].toLowerCase()) {
      obj.closest("tr").style.opacity = ".5";
    }
  }
}

body {
  margin: 32px;
}
a:link {
  color: #cc3300;
  text-decoration: none;
}
a:visited {
  color: #cc3300;
  text-decoration: none;
}
a:hover, a:active {
  color: #330099;
  text-decoration: underline;
}

td {
  font: 10pt verdana;
}
.tborder {
  background: #D1D1D1;
  color: #000000;
  border: 0px solid #a1a1a1;
}
.alt1 {
  background: #F1F1F1;
  color: #000000;
}

.smallfont {
  font: 11px verdana;
}

<table class="tborder" id="threadslist" width="100%" cellspacing="1" cellpadding="5" border="0" align="center">
  <tbody id="threadbits_forum_12">
    <tr>
      <td class="alt1" id="td_threadtitle_0001" title="">
        <div>
          <a href="showthread.php?t=0001" id="thread_title_0001">Example for special characters</a>
        </div>
        <div class="smallfont">
          <span style="cursor:pointer" onclick="window.open('member.php?u=100', '_self')">Tro||</span>
        </div>
      </td>
    </tr>
    <tr>
      <td class="alt1" id="td_threadtitle_0002" title="">
        <div>
          <a href="showthread.php?t=0002" id="thread_title_0002">Just a thread</a>
        </div>
        <div class="smallfont">
          <span style="cursor:pointer" onclick="window.open('member.php?u=100', '_self')">I want to select this</span>
        </div>
      </td>
    </tr>
    <tr>
      <td class="alt1" id="td_threadtitle_0003" title="">
        <div>
          <a href="showthread.php?t=0003" id="thread_title_0003">And</a>
        </div>
        <div class="smallfont">
          <span style="cursor:pointer" onclick="window.open('member.php?u=200', '_self')">this</span>
        </div>
      </td>
    </tr>
    <tr>
      <td class="alt1" id="td_threadtitle_0004" title="">
        <div>
          <a href="showthread.php?t=0004" id="thread_title_0004">Another thread</a>
        </div>
        <div class="smallfont">
          <span style="cursor:pointer" onclick="window.open('member.php?u=200', '_self')">NOT THIS</span>
        </div>
      </td>
    </tr>
    <tr>
      <td class="alt1" id="td_threadtitle_0005" title="">
        <div>
          <a href="showthread.php?t=0005" id="thread_title_0005">Intresting thread</a>
        </div>
        <div class="smallfont">
          <span style="cursor:pointer" onclick="window.open('member.php?u=300', '_self')">That guy</span>
        </div>
      </td>
    </tr>

    
    
    
  </tbody>
  
</table>