我正在尝试过滤掉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>
答案 0 :(得分：1)
这是我将使用的解决方案，毫无疑问有很多空气（这是一个可重复使用的代码）：
function myFunction(e) {
e.preventDefault();
var thisInput = $(this);
var thisInputValue = $.trim(thisInput.val().toLowerCase());
$(thisInput.data('filter')).each(function(j) {
var toFilter = $(this);
if (toFilter.find('span').length < 1) {
/* Split lines using spans, but include ending new line char */
var oldText = toFilter.text();
var oldTextSplit = oldText.split('\n');
var newText = '<span>' + oldTextSplit.join('\n</span><span>') + '\n</span>';
toFilter.html(newText);
};
if (thisInputValue) {
/* Filter (hide) rows which contain no filter */
toFilter.find('span').each(function(i) {
var thisRow = $(this);
var thisRowText = thisRow.text().toLowerCase();
if (thisRowText.indexOf(thisInputValue) < 0) {
thisRow.addClass('invisible-row');
} else {
thisRow.removeClass('invisible-row');
};
});
} else {
/* Nothing to filter, show all rows */
toFilter.find('span').removeClass('invisible-row');
};
});
};
$('[data-filter]').on('input', myFunction);.invisible-row {
display: none;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form autocomplete="off" class="form-inline my-2 my-lg-0">
<input type="text" id="myInput" placeholder="type to filter" data-filter=".filter-my-lines, .filter-me-also">
</form>
<pre class="filter-my-lines">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>
<pre class="filter-me-also">1234
Other pre container
Also Z here!
</pre>
同样在JSFiddle。
编辑：也适用于多个目标。
答案 1 :(得分：0)
<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>
它应该现在可以工作，也许上下文有超过1个，然后我们需要做一些额外的