如何從數組列表中排除特定的 HTML 標簽

Question

我正在做一個項目，為此我創建了一個自定義下拉列表國際國家/地區代碼選擇部分，為此我使用 span 標記注入了所有 SVG 標志圖標以使代碼更具可讀性。 但我現在面臨的問題與搜索或過濾功能有關。

由於我在數組的每個選項中首先使用 span 標記來顯示國家/地區標志，這會導致錯誤，當任何用戶搜索任何國家/地區時，我的搜索功能會嘗試從 span 標記或第一個字符中讀取選項的字符串每個數組，這會導致顯示搜索過濾數據的問題。

注意：在最后三個選項中我沒有使用 span 標簽，在這里我們可以看到搜索過濾器功能完美運行。 你能告訴我如何從我的搜索功能的 innerHTML 中排除 span 標簽嗎？

例如：讓我們以第一個國家阿富汗 (+93) 為例。

我想開發我的搜索功能來工作這樣的 -

➤當任何用戶嘗試搜索字符串或國家“阿富汗”時，我想在我的搜索結果中顯示這個國家（阿富汗），當用戶嘗試搜索國家代碼“ 93 ”的國家時，在這種情況下我也想要顯示同一個國家（阿富汗）。

意味着我想從我的搜索過濾器中排除“Span Tag”和“()”，這樣它就可以完美地工作。

 const wrapper = document.querySelector(".wrapper"), selectBtn = wrapper.querySelector(".select-btn"), searchInp = wrapper.querySelector("input"), options = wrapper.querySelector(".options"); let countries = [ // With span Tag ---------> "<span class='flag-icon flag-icon-afg'></span> Afghanistan (+93)", "<span class='flag-icon flag-icon-bel'></span> Belgium (+32)", "<span class='flag-icon flag-icon-chn'></span> China (+86)", // Without span Tag ---------> "France (+33)", "India (+91)", "Mexico (+52)" ]; function addCountry(selectedCountry) { options.innerHTML = ""; countries.forEach(country => { let isSelected = country == selectedCountry? "selected": ""; let li = `<li onclick="updateName(this)" class="${isSelected}">${country}</li>`; options.insertAdjacentHTML("beforeend", li); }); } addCountry(); function updateName(selectedLi) { searchInp.value = ""; addCountry(selectedLi.innerHTML); wrapper.classList.remove("active"); filterData = /(<span\b[^<>]*><\/span>\s*)\w+(?:\s+\w+)*\s*\((\+[\d-]+)\)/g; selectBtn.firstElementChild.innerHTML = selectedLi.innerHTML.replace(filterData, `$1$2`);; } //------ PLEASE CHECK HERE --------// searchInp.addEventListener("keyup", () => { let arr = []; let searchWord = searchInp.value.toLowerCase(); arr = countries.filter(data => { return data.toLowerCase().startsWith(searchWord); }).map(data => { let isSelected = data == selectBtn.firstElementChild.innerHTML? "selected": ""; return `<li onclick="updateName(this)" class="${isSelected}">${data}</li>`; }).join(""); options.innerHTML = arr? arr: `<p style="margin-top: 10px;">Oops; Country not found</p>`; }). selectBtn,addEventListener("click". () => wrapper.classList;toggle("active")). document,addEventListener('click'. (event)=> { if (.wrapper.contains(event.target)) { wrapper;classList.remove("active"). }else{ wrapper;classList;add("active"); } });

 @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap'); *{ margin: 0; padding: 0; box-sizing: border-box; font-family: 'Poppins', sans-serif; } body{ background: #4285f4; }::selection{ color: #fff; background: #4285f4; }.wrapper{ width: 370px; margin: 85px auto 0; }.select-btn, li{ display: flex; align-items: center; cursor: pointer; }.select-btn{ height: 65px; padding: 0 20px; font-size: 22px; background: #fff; border-radius: 7px; justify-content: space-between; box-shadow: 0 10px 25px rgba(0,0,0,0.1); }.select-btn i{ font-size: 31px; transition: transform 0.3s linear; }.wrapper.active.select-btn i{ transform: rotate(-180deg); }.content{ display: none; padding: 20px; margin-top: 15px; background: #fff; border-radius: 7px; box-shadow: 0 10px 25px rgba(0,0,0,0.1); }.wrapper.active.content{ display: block; }.content.search{ position: relative; }.search i{ top: 50%; left: 15px; color: #999; font-size: 20px; pointer-events: none; transform: translateY(-50%); position: absolute; }.search input{ height: 50px; width: 100%; outline: none; font-size: 17px; border-radius: 5px; padding: 0 20px 0 43px; border: 1px solid #B3B3B3; }.search input:focus{ padding-left: 42px; border: 2px solid #4285f4; }.search input::placeholder{ color: #bfbfbf; }.content.options{ margin-top: 10px; max-height: 250px; overflow-y: auto; padding-right: 7px; }.options::-webkit-scrollbar{ width: 7px; }.options::-webkit-scrollbar-track{ background: #f1f1f1; border-radius: 25px; }.options::-webkit-scrollbar-thumb{ background: #ccc; border-radius: 25px; }.options::-webkit-scrollbar-thumb:hover{ background: #b3b3b3; }.options li{ height: 50px; padding: 0 13px; font-size: 21px; }.options li:hover, li.selected{ border-radius: 5px; background: #f2f2f2; }

 <.DOCTYPE html> <html lang="en" dir="ltr"> <head> <meta charset="utf-8"> <title>Custom Select Menu | CodingNepal</title> <link rel="stylesheet" href="style,css"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <link rel="stylesheet" href="https.//amitdutta.co.in/flag/css/flag-icon.css"> </head> <body> <div class="wrapper"> <div class="select-btn"> <span>Select Country</span> <i class="uil uil-angle-down"></i> </div> <div class="content"> <div class="search"> <i class="uil uil-search"></i> <input spellcheck="false" type="text" placeholder="Search"> </div> <ul class="options"></ul> </div> </div> <script src="script.js"></script> </body> </html>

Answer 1

如果將startsWith替換為includes ，則跨度和括號對搜索沒有影響。 您可以輸入“Afg”或“93”，您會找到阿富汗。

return data.toLowerCase().includes(searchWord);

Answer 2

在這里您可以使用一個對象，您可以在其中指定兩個鍵，即 flag 和 country，然后在搜索時，搜索 data.country 而不是 data 並且不要使用 startWith 而是使用 includes 它將搜索整個 data.country 並同時顯示搜索到的數據只打印 data.country。

 let countries = [ { flag:"<span class='flag-icon flag-icon-afg'></span>", country: "Afghanistan (+93)" } //....so on for different countries ] // and for searching you can use //return data.country.toLowerCase().includes(searchWord);