Почему моя функция не отображает правильный формат HTML-тегов при выделении совпадений? ⇐ CSS

[Anonymous]

Я пытаюсь создать строки совпадений, выделяющие совпадения в следующем коде. Но почему-то результаты или вывод не отображаются в формате, который я устанавливаю в результатах div (UL/LI). На самом деле, я был бы признателен за ваш совет по решению этой проблемы.

Код: Выделить всё

element.innerHTML = highlightedText;  //if I comment this line, then the text works but, without format

Код: Выделить всё

function wrapMatchesInSpan(element, searchTerm) {
var text = element.textContent;
var regex = new RegExp(searchTerm, 'gi');
var matches = text.match(regex);
if (matches && matches.length > 0) {
var highlightedText = text.replace(regex, function(match) {
return '' + match + '';
});
element.innerHTML = highlightedText; //if I comment this line, then the text works but, without format
}
}

function search() {
var searchTerm = document.getElementById("searchInput").value.toLowerCase();
var listItems = document.getElementById("searchResults").getElementsByTagName("li");
var teamItems = document.getElementById("searchTeams").getElementsByTagName("li");
var resultsDiv = document.getElementById("results");

for (var i = 0; i < listItems.length; i++) {
var listItem = listItems[i];
var text = listItem.textContent.toLowerCase();

if (text.includes(searchTerm)) {
listItem.innerHTML = listItem.innerHTML.replace(new RegExp(searchTerm, 'gi'), function(match) {
return '' + match + '';
});
listItem.style.display = "list-item";
} else {
listItem.innerHTML = ''; // Clear the content
listItem.style.display = "none";
}
}

var hideAllTeams = true;
for (var j = 0; j < teamItems.length;  j++) {
var teamItem = teamItems[j];
var teamText = teamItem.textContent.toLowerCase();

if (teamText.includes(searchTerm)) {
teamItem.style.display = "list-item";
hideAllTeams = false;
} else {
teamItem.style.display = "none";
}
}

if (searchTerm === "") {
resultsDiv.style.display = "none";
} else {
resultsDiv.style.display = "block";
}

if (hideAllTeams) {
teamsDiv.style.display = "none";
} else {
teamsDiv.style.display = "block";
}
}

Код: Выделить всё

* {
box-sizing: border-box;
}

#results {
display: none;
margin-top: 10px;
}

#searchResults {
background-color: #f6f6f6;
margin-top: -2px;
width: 430px;
height: 200px;
border: 1px solid #ddd;
}

#searchInput {
background-image: url('/css/searchicon.png');
background-position: 10px 12px;
background-repeat: no-repeat;
width: 425px;
font-size: 14px;
padding: 12px 20px 12px 40px;
border: 1px solid #ddd;
margin-bottom: 12px;
}

#searchTeams {
list-style-type: none;
width: 425px;
font-size: 16px;
border: 1px solid #ddd;
}

#searchTeams li a {
color: 1px solid #ddd;
margin-top: -2px;
/* Prevent double borders */
background-color: #f6f6f6;
background-position: 10px 12px;
font-weight: bold;
padding: 12px;
text-decoration: none;
font-size: 19px;
color: black;
display: block
}

#teams {
color: 1px solid #ddd;
margin-top: -2px;
/* Prevent double borders */
padding: 12px;
text-decoration: none;
}

#searchTeams li a:hover:not(.header) {
background-color: #aeadca;
width: 100%;
padding-left: 35px;
color: blue;
}

ul.scroll {
background-color: #f6f6f6;
width: 600px;
height: 500px;
overflow-x: hidden;
overflow-y: auto;
text-align: left;
padding: 20px;
}

.highlight {
background-color: yellow;
}

Код: Выделить всё

NACC-Teams-Locator




ACC Teams:

[list]
[*][url=#]WMAA[/url]
[*][url=#]MobileInf[/url]
[*][url=#]MSM[/url]
[*][url=#]SECAPPS[/url]
[*][url=#]SECAPPS[/url]
[/list]

Services supported by team:
[list]
[*]
MobileInf:
-APIs
-Layer 7
-Gloo
-Gateways
-API portal
[*]
Midrange Servers Management (MSM): -Servers
-Filesystem usage
-Patching
-Root
-API portal
[*]
SECAPPS: -Okta
-Passwordsafe
-OIG
-Forgerock
-Evidian
-Cyberark
-go/password
[*]
Hadoop: -Hive
-Cloudera
-Hue/Ambari
-Yarn/HDFS
-Hadoop Data Movement[/b]

[/list]



//

Подробнее здесь: https://stackoverflow.com/questions/766 ... ighlightin