Skip to content
Advertisement

How to convert Fancy text to normal text in javascript?

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/

Advertisement

Answer

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>
User contributions licensed under: CC BY-SA
4 People found this is helpful
Advertisement