I'm creating a search function on javascript that has normal and fancy text.
The problem is when searching: Fancy text value: 𝗬𝗼𝘂 𝗡𝗲𝗲𝗱 𝘁𝗼 𝗞𝗻𝗼𝘄 𝗔𝗯𝗼𝘂𝘁
it does not work.
document.getElementById("search").addEventListener("keyup", function(evt) {
[].forEach.call(document.querySelectorAll(".subjects .subject"), function(subject) {
if (subject.textContent.indexOf(evt.target.value) === -1) {
subject.classList.add("hide");
} else {
subject.classList.remove("hide");
}
});
}, false);<input id="search"></input>
<div class="subjects">
<div class="subject">soccer</div>
<div class="subject">dancing</div>
<div class="subject">𝗬𝗼𝘂 𝗡𝗲𝗲𝗱 𝘁𝗼 𝗞𝗻𝗼𝘄 𝗔𝗯𝗼𝘂𝘁 </div>
</div>Normalise the string with compatibility decomposition before searching
const subjects = document.querySelectorAll(".subjects .subject");
const normalisationForm = "NFKC";
document
.getElementById("search")
.addEventListener("input", ({ target: { value } }) => {
subjects.forEach(({ classList, textContent }) => {
const normalised = textContent.normalize(normalisationForm).toLowerCase();
classList.toggle("hide", !normalised.includes(value.toLowerCase()));
});
});.hide { text-decoration: line-through; opacity: .6; }<input id="search" />
<div class="subjects">
<div class="subject">soccer</div>
<div class="subject">dancing</div>
<div class="subject">𝗬𝗼𝘂 𝗡𝗲𝗲𝗱 𝘁𝗼 𝗞𝗻𝗼𝘄 𝗔𝗯𝗼𝘂𝘁 </div>
</div>