如何使用javascript在html表中删除字符串

使用 Jquery 插件进行过滤并在 jQuery.FilterTable 等表中搜索jQuery.FilterTable

这段代码可能会帮助你

function findWord(str) {
    var tdText=document.getElementById("search").textContent.trim();
    return tdText.search(str);
}

你这里有一些错误。您将在调试中找到的第一个是：

Uncaught ReferenceError: str is not defined

这意味着您正在尝试对尚未定义的变量调用 strike(( 函数。 首先需要获取搜索值并将其存储在变量中。

你的html输入为id="word"，所以我们需要从html中获取它。执行此操作的命令是：

document.getElementById("word")

我们特别想要他们输入的值，即：

var str = document.getElementById("word").value

现在，如果他们输入"hello"或"javascript"，它将存储在str变量中。 问题 1 已修复！进入第二个问题。

var inputVal = document.getElementById( "search" );

请记住，当您获取 Element 时，它会返回整个节点，而不是存储在其中的值。 以前，我们必须使用 value 命令来获取实际文本，但如果您在此处尝试，它将不起作用，因为搜索是一个<td>元素，而不是输入。 我以前从未从<td>获取文本，因此我必须使用调试器工具查找它。 (如果你不熟悉它们，这里有一个关于如何使用chrome开发工具的指南。事实证明，对于td，你想要的要么是innertext，要么是innerHTML。 查看每个中存储的内容，innerHTML是我们想要使用的那个，因为它只获取整个html，这在以后会很重要(innerText不会像<br'>那样获得html元素(。

var wordSearch = document.getElementById("search").innerHTML;

我还将存储它的变量的名称从inputVal更改为wordSearch，因为我觉得将其命名为inputVal有点令人困惑，因为我认为该名称是用户输入的值，而不是wordSearch文档的值。

好的，现在我们有来自用户的输入和wordSearch，下一个麻烦的行是这一行：

wordSearch.elements.value = words.indexOf( inputVal.value=result );

我相信您正在尝试查看用户提供的值是否存在于wordSearch中的某个位置，这将是下一个合乎逻辑的步骤。 所以，这里有几件事。首先，您再次引用尚未定义的变量，在本例中为：wordSearch。 根据您上面的评论，您使用的单词搜索来自类名。 不幸的是，在 JavaScript 中，你不能像这样直接基于它的类调用元素。 您需要执行以下操作：

document.getElementsByClassName("wordSearch")

但是，我不推荐这种方法，因为(正如精明的观察者可能已经从名称中猜到的那样(getElementsByClassName 返回元素列表，而不是特定元素(因此名称使用"元素"而不是"元素"(。 这是因为多个元素可以具有相同的类名。 这就是为什么我之前使用 id 而不是类名来查找它的原因。只有一个元素可以具有特定的 id。

其次，我们有以下代码片段：

words.indexOf( inputVal.value=result )

这是在做两件事。首先，它将结果变量分配给inputVal.value，因为您有一个等号。 如果要比较它们，则需要两个(==(或三个(===(。 它要做的第二件事是检查该值的第一个索引的单词。 indexOf 返回一个整数，指示找到它的位置，如果未找到，则返回 -1。 让我们解决这个问题。

var locationFound = wordSearch.indexOf(str.toUpperCase());

这将为我们提供在单词搜索中找到提供的搜索值的位置，如果未找到，则为 -1。 然后你可以做这样的事情：

if (locationFound === -1) {
  alert(str + " wasn't found");
} else {
  // strike through code goes here
}

现在，我们需要对删除线部分进行编码。

var locationEnd = locationFound + str.length;
str = str.strike();
document.getElementById("search").innerHTML = 
        wordSearch.slice(0, locationFound) + 
        str + 
        wordSearch.slice(locationEnd);

好吧，这可能看起来有点令人困惑，但让我们一次一行地浏览它。

var locationEnd = locationFound + str.length;

这是获得找到搜索值的终点，我们稍后会需要它。

str = str.strike();

这是我们进行删除线的地方，替换原始文本。

document.getElementById("search").innerHTML = 
        wordSearch.slice(0, locationFound) + 
        str + 
        wordSearch.slice(locationEnd);

这样做是删除文档中的原始单词，并将其替换为删除线版本。 然后，它将该值设置为具有搜索 id 的元素的 innerHTML。

最终代码：

<table>
    <tr>
        <td class="wordSearch" id="search">
            QMGLUTKVRDIYKSA <br />
            GKMTWRITELNXDYP <br />
            MGETELEMENTBYID <br />  
            TTOLOWERCASEBRD <br />  
            NYRTOUPPERCASEI <br />  
            CJDYOFUNCTIONPN <br />  
            WEMSFZTJZJOMFTV <br />  
            BCBCCXSURWHILEE <br />      
            PPRETURNXATLJOU <br />  
            OIFYGTVFXHAAVIN <br />  
            FZRXADXETWINDOW <br />      
            DWNIZKHIVFXPIDL <br />      
            IFRSTRINGVCQQLP <br />
            DOCUMENTULELSEN <br />  
            JYBOOLEANFAXAJH 
        </td>
    </tr>
    </table>
    <form action="">
        <p>
            <label>Enter the word you've found and press Enter:
            <input type="text" id="word" />
            </label>
            <input type="button" value="Enter" onclick= "findWord();" />
        </p>
    </form>
    <div id="scoreArea"></div>
<script type="text/JavaScript">
    var words = "Javascript";
    function findWord() {
        var str = document.getElementById("word").value.toUpperCase();
        var wordSearch = document.getElementById("search").innerHTML;
        var locationFound = wordSearch.indexOf(str);
        if (locationFound === -1) {
          alert(str + " wasn't found");
        } else {
          var locationEnd = locationFound + str.length;
          str = str.strike();
          document.getElementById("search").innerHTML = 
                  wordSearch.slice(0, locationFound) + 
                  str + 
                  wordSearch.slice(locationEnd);
        }
    }
</script>