如何从数组列表中排除特定的 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);