How to convert Fancy text to normal text in javascript?

Question

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>

http://jsfiddle.net/goLk7qyf/

Answer 1

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>