Javascript 如何过滤预标记中的文本行？

我试图过滤掉pre标签中的文本。我知道这不是常规做法，也不确定这是否可以做到。我的最终目标是只显示与搜索匹配的行。在我的示例代码中只有一行是z。目标是，如果搜索z，则只显示与z匹配的线。当前，如果未找到匹配项，则整个部分将消失

另外，我的示例是一个div容器，但实际上，相同的容器会有更多。如果过滤器可以同时应用于所有div容器，那就太好了。首选使用JS或jquery的解决方案

代码如下：

function myFunction() {
    var input, filter, div, pre, h1, i;
    input = document.getElementById('myInput');
    filter = input.value.toUpperCase();
    // ul = document.getElementById("lsoutput");
    li = document.getElementsByClassName("context")

    for (i = 0; i < li.length; i++) {
        a = li[0].getElementsByTagName("pre")[0];
        if (a.innerHTML.toUpperCase().indexOf(filter) > -1) {
            li[i].style.display = "";
        } else {
            li[i].style.display = "none";
        }
    }
}

<form autocomplete="off" class="form-inline my-2 my-lg-0">
    <input type="text" id="myInput" onkeyup="myFunction()" placeholder="filter">
</form>
<div class="container context">
    <pre>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium
totam rem aperiam
eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit
sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est
qui dolorem ipsum quia dolor sit amet
consectetur
z
adipisci velit
sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam
quis nostrum exercitationem ullam corporis suscipit laboriosam
nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur
vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?
    </pre>
</div>

---

这是一个我会使用的解决方案，毫无疑问，在空气中有很多它是一个可重用的代码：

函数myFunctione{ e、 防止违约； var thisInput=$this； var thisInputValue=$.trimthisInput.val.toLowerCase； $thisInput.data'filter'。每个函数{ var-toFilter=$this； 如果要过滤，请查找“跨度”。长度<1{ /*使用跨距拆分行，但包括结束新行字符*/ var oldText=toFilter.text； var oldTextSplit=oldText.split'\n'； var newText=+oldTextSplit.join'\n'+'\n'； toFilter.htmlnewText； }; 如果这个输入值{ /*筛选器隐藏不包含筛选器的行*/ toFilter.找到span.每个函数{ var thisRow=$this； var thisRowText=thisRow.text.toLowerCase； 如果thisRowText.indexOfthisInputValue<0{ thisRow.addClass'invisible-row'； }否则{ 移除类“隐形行”； }; }; }否则{ /*无需筛选，显示所有行*/ toFilter.find'span'。删除类'invisible-row'； }; }; }; $'[data filter]'。在'input'，myFunction； .不可见行{ 显示：无； } 在所有错误情况下，都应清楚地说明错误所在 托塔姆·雷姆·佩里亚姆酒店 发明者的真实性和准建筑师必须解释清楚。尼莫·埃尼姆·伊普萨姆·沃鲁帕特是一个真正的沃鲁帕特人 这句话的意思是：你的大脑有多大。内克·波罗·奎斯夸姆东部 我不知道该怎么做 圣骑士 Z 阿迪皮西·维利特 这句话的意思是，工人和工人的时间不长，他们的工作质量也不高。我们必须尽可能少地工作 在实验室里，我们需要一个健康的身体 从消费品中提取现金？我们必须在法律上尊重法律，因为法律是法律的一部分 你是说你的房间里有没有空房间？ 1234 其他预集装箱 这里也是Z！

---

它现在应该可以工作了，也许上下文中有超过1个pre，那么我们需要多做一点

你是说整行吗？@Pavlo是的；如果有匹配的话，我想展示整条线。但是如果没有匹配，那么这些行将被隐藏。您更喜欢哪种解决方案。有两个标记，这样我们就可以在输入不是空的时候隐藏原始文本，或者在JavaScript中保存整个文本？嗯。。。html是由一个脚本生成的，所以我认为对我来说，集成一个JS或jquery解决方案与两个pre标记可能是最容易的。另外，我的示例是一个div容器，但实际上，相同的容器会有更多。如果过滤器可以同时应用于所有div容器，那就太好了。这非常好！在同时过滤时，这是否也适用于多个div容器？我编辑了代码，希望这是您想要看到的。这太完美了！我还没法让它工作，但让我来摆弄一下。剧本和形式会一直在脑子里吗？我把它从那里移走了，因为把它放在那里是非常不合逻辑的，尤其是表单是的，脚本和表单留在了脑袋里。表单实际上是导航栏的一部分，但我缩小了stackoverflowoof的代码。。你确定它不是标题吗？头部仅用于脚本和css等设置，所有渲染的内容都应在bodyoops中。是的，我是说头球。哈哈。

<header>
    <link href="https://bootswatch.com/4/flatly/bootstrap.min.css" rel="stylesheet" type="text/css">
    <script>

        var pres = undefined;
        var preLines = undefined; //Is set before user can click on input

        //Wait til page is rendered
        document.addEventListener("DOMContentLoaded", function(event) {

            pres = document.getElementByTagName('pre');
            var preToArray = Array.prototype.slice.call(pres); //or
            // var preToArray = Array.from(pres); //This is an ES6 function

            //create a list of pre's who have a list of lines
            preLines = preToArray.reduce(function(sum, pre){
                sum.push(pre.innerHTML.split('/n'));
                return sum; 
            },[]);
        });

        function textFilter(element) {
            var inputValue = element.value.toUpperCase();
            var contextClasses = document.getElementsByClassName('context');

            for (var i = 0; i < contextClasses.length; i++) {
                //Not really sure what to do with contextClasses
                var currentPre = pres[i];
                var preLine = preLines[i];
                var renderedLine = preLine.filter(
                    function(element){
                        return element.toUpperCase().indexOf(inputValue) > -1;
                    });
                if(renderedLine.length > 0){ //We found a line
                   currentPre.innerHTML = renderedLine.join('\n');
                }else{ //We found nothing - so show the original?
                   currentPre.innerHTML = preLine.join('\n');
                }
            }
        }
    </script>
    <form autocomplete="off" class="form-inline my-2 my-lg-0">
        <input type="text" id="myInput" onkeyup="textFilter(this)" placeholder="filter">
    </form>
</header>
<div class="container context">
    <pre>Sed ut perspiciatis unde omnis iste natus error sit voluptatem 
        sed quia consequuntur magni dolores eos qui ratione voluptatem 
        sequi nesciunt. Neque porro quisquam est
        qui dolorem ipsum quia dolor sit amet
        consectetur
        z
        adipisci velit
        sed quia non numquam eius modi tempora incidunt ut labore et 
        dolore magnam aliquam quaerat voluptatem. Ut enim ad minima 
        veniam
    </pre>
</div>