我正在嘗試過濾和標記網頁中的單詞，Sajeeb Ahamed 慷慨地幫助我編寫了一段完全符合我想要的功能的代碼，但是當我添加其他元素標簽（例如列表項或標題標簽）時，當我清除輸入框顯示 HTML 標記。$(document).ready(function() { $("#myInput").on("keyup", function() { var value = $(this).val().toLowerCase(); $("#myDIV>*").map(function() { var el = $(this); var content = el.html().replace(/(<span class="highlighted">)|(<\/span>)/g, ""); el.html(content); var hasText = el.text().toLowerCase().indexOf(value) > -1; el.toggle(hasText); if (hasText) { // escape value for use in regex var textRegex = new RegExp(value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "g"); el.html(content.replace(textRegex, '<span class="highlighted">$&</span>')); } }); });});.highlighted { background-color: yellow;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><input id="myInput" /><!-- the new search --><div id="myDIV"> <p>This is a test</p> <ul> <li>This is a list item</li> <li>This is a another list item</li> </ul> <a href="">This is a link</a></div>這是代碼，它只接受段落標簽。有人知道為什么嗎？
3 回答
猛跑小豬
TA貢獻1858條經驗 獲得超8個贊
它適用于第一級（不深）具有 id 'myDIV' 的元素內的任何元素，因為您正在使用此選擇器$("#myDIV>*")。確保您的標簽符合此規則。
更新新信息
$(document).ready(function() {
$("#myInput").on("keyup", function() {
var value = $(this).val().toLowerCase();
// Remove all class="highlighted" inside #myDIV
$("#myDIV").html($("#myDIV").html().replace(/(<span class="highlighted">)|(<\/span>)/g, ""))
$("#myDIV *").map(function() {
var el = $(this);
// Only in deep children aplly your logic
if (el.children().length == 0) {
var content = el.html().replace(/(<span class="highlighted">)|(<\/span>)/g, "");
el.html(content);
var hasText = el.text().toLowerCase().indexOf(value) > -1;
el.toggle(hasText);
if (hasText) {
// escape value for use in regex
var textRegex = new RegExp(value.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "g");
el.html(content.replace(textRegex, '<span class="highlighted">$&</span>'));
}
}
});
});
});
.highlighted {
background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="myInput" />
<!-- the new search -->
<div id="myDIV">
<p>This is a test</p>
<ul>
<li>This is a list item</li>
<li>This is a another list item</li>
</ul>
<a href="">This is a link</a>
</div>
您需要對深度兒童應用更改。并在開始時刪除課程突出顯示
撒科打諢
TA貢獻1934條經驗 獲得超2個贊
最干凈的方法，rest div并且start again. 所以在開始之前，我拿了snapshot of div和save it。每次數據change我reconstruct它。易于理解和擴展。
建議： UI 應該是數據驅動的。不是 HTML/內容驅動的。您可以創建數據列表并根據每次更改進行構建。
查看我的第二個例子
不要改變狀態/UI[React]
$(document).ready(function () {
const div = $("#myDIV").html();
$("#myInput").on("keyup", function () {
var value = $(this).val().toLowerCase();
$("#myDIV").html(div); //Reset
const p = $("#myDIV p");
var hasText = p.text().toLowerCase().indexOf(value) > -1;
hasText && highlight(p, value);
$("#myDIV li").map(function () {
var el = $(this);
var hasText = el.text().toLowerCase().indexOf(value) > -1;
if (hasText) {
highlight(el, value);
} else {
el.remove();
}
});
});
});
function highlight(elm, text) {
elm.html(
elm
.html()
.replace(new RegExp(`(${text})`), '<span class="highlighted">$1</span>')
);
}
.highlighted {
background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="myInput" />
<!-- the new search -->
<div id="myDIV">
<p>This is a test</p>
<ul>
<li>This is a list item</li>
<li>This is a another list item</li>
</ul>
<a href="">This is a link</a>
</div>
使用數據驅動的方法。
$(document).ready(function () {
const list = ["This is a list item", "This is a another list item"];
function buildUi(keyword) {
$("#filter .list").html("")
list.forEach((text) => {
if (!keyword || text.toLowerCase().indexOf(keyword) !== -1) {
text = text.replace(
new RegExp(`(${keyword})`),
'<span class="highlighted">$1</span>'
);
} else {
return;
}
const li = $(`<li>${text}</li>`);
$("#filter .list").append(li);
});
}
buildUi("");
$("#myInput").on("keyup", function () {
const keyword = $(this).val().toLowerCase()
buildUi(keyword)
});
});
.highlighted {
background-color: yellow;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input id="myInput" />
<!-- the new search -->
<div id="filter">
<p>This is a test</p>
<ul class="list">
</ul>
<a href="">This is a link</a>
</div>
翻翻過去那場雪
TA貢獻2065條經驗 獲得超14個贊
大家好，我找到了我想要的東西，感謝這里各位大佬的幫助和大量的腦力勞動，這個腳本適用于本地網頁搜索和過濾器，它必須與 jsquery mini 和 hilitor 一起運行。 js 文件。這對于外面的人來說應該是有價值的。祝各位編碼愉快。
<script src="../js/hilitor.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
window.addEventListener("DOMContentLoaded", function(e) {
var myHilitor2 = new Hilitor("playground");
myHilitor2.setMatchType("left");
document.getElementById("keywords").addEventListener("keyup", function(e) {
myHilitor2.apply(this.value);
}, false);
}, false);
$(document).ready(function(){
$("#keywords").on("keyup", function() {
var value = $(this).val().toLowerCase();
$("#playground *").filter(function() {
$(this).toggle($(this).text().toLowerCase().indexOf(value) > -1)
});
});
});
</script>
<label>Search And Filter</label><input id="keywords" type="text" placeholder="Search And Filter.." onKeyDown="if(event.keyCode === 32) return false;">
<div id="playground" >
<ul>
<li>Hey diddle diddle,</li>
<li>The cat and the fiddle,</li>
<li>The cow jumped over the moon.</li>
<li>The little dog laughed to see such sport,</li>
<li>And the dish ran away with the spoon.</li>
</ul>
</div>
- 3 回答
- 0 關注
- 171 瀏覽
添加回答
舉報
0/150
提交
取消