javascript - 如何过滤 pre 标签内的文本行？

Question

我正在尝试过滤掉 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>

jsfiddle

Answer 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 .

编辑:也适用于多个目标。