Converting Fancy Text to Plain Text using Javascript: A Step-by-Step Guide

I am currently developing a search feature in JavaScript that supports both regular and fancy text styles.

However, I have encountered an issue with the search functionality not working when searching for: Fancy text value: π—¬π—Όπ˜‚ 𝗑𝗲𝗲𝗱 π˜π—Ό π—žπ—»π—Όπ˜„ π—”π—―π—Όπ˜‚π˜

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/

javascriptunicode-normalization

Answer β„–1

Normalize the text using compatibility decomposition prior to searching for it

let items = document.querySelectorAll(".items .item");
const normalizationType = "NFKC";

document
  .getElementById("search")
  .addEventListener("input", ({ target: { value } }) => {
    items.forEach(({ classList, textContent }) => {
      const normalizedText = textContent.normalize(normalizationType).toLowerCase();

      classList.toggle("hide", !normalizedText.includes(value.toLowerCase()));
    });
  });
.hide { text-decoration: line-through; opacity: .6; }
<input id="search" />
<div class="items">
  <div class="item">football</div>
  <div class="item">swimming</div>
  <div class="item">π—¬π—Όπ˜‚ 𝗑𝗲𝗲𝗱 π˜π—Ό π—žπ—»π—Όπ˜„ π—”π—―π—Όπ˜‚π˜ </div>
</div>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

myObject loop not functioning properly in Internet Explorer version 10

Could someone please point out what is wrong with this code snippet? HTML: <div id="res"></div> Javascript: var myObject = { "a" : { src : "someimagepath_a.png" }, "b" : { src : "someimagepath_b.png" }, }; va ...

javascriptjsoninternet-explorer-10

Vue3 and Ionic combined to create a Component that became a reactive object in Vue

Vue is issuing a warning about receiving a Component as a reactive object, which can cause unnecessary performance overhead. The warning suggests using markRaw or shallowRef instead of ref to avoid this issue. However, in my code, I am not explicitly using ...

javascripttypescriptvue.jsionic-frameworkvuejs3

Struggling with transferring information from JavaScript to PHP through the use of Ajax

Currently, I am working on creating a string using a JavaScript function and then passing it to PHP. This is the block of code in my JavaScript file: <script> function passVal(){ var strUrl = buildStringUrl(lat1, lng1, lat2, ...

javascriptphpajax

Ensure that only a single onmouseover event is triggered when hovering over multiple elements

I want to create a simple code snippet like the one below: <span onmouseover="alert('hi')">Hello, <span onmouseover="alert('hello')">this</span> is a test</span> However, I need to ensure that when hovering ove ...

javascripthtml

Obtaining an array of weeks for the previous two months from the current date using JavaScript

Looking to generate a list of weeks for the past two months using JavaScript. Any suggestions on how to accomplish this task would be greatly appreciated. [ { "week_start": "8/01/2016", "week_end": "8/06/2016" }, { "w ...

javascript

Conceal the ::before pseudo-element when the active item is hovered over

Here is the code snippet I am working with: <nav> <ul> <li><a href="javascript:void(0)" class="menuitem active">see all projects</a></li> <li><a href="javascript:void(0)" class="menuitem"> ...

javascriptjqueryhtmlcss

Ways to trigger an onClick event of one div based on the presence of another div

I'm looking to execute a function when a specific type of button is clicked on my HTML page. I have approximately 10 buttons on the page and I've written the following code to call a function when a button is clicked: $('.divname').ea ...

javascriptjquery

Transforming the CanvasRenderer into a WebGLRenderer

I'm interested in implementing a visual effect similar to the one demonstrated in the example here: To achieve this, I want to modify the renderer to use WebGLRenderer instead of CanvasRenderer by changing: renderer = new THREE.CanvasRenderer(); to ...

javascriptthree.js

What is causing the backslash character to be removed from my ajax request?

When using Ajax to call a rest endpoint, the request takes two parameters: user and permission. $.ajax({ type: 'GET', cache: false, url: "/app/Rest/4.0/UserManagement/AddPermissionToUser", data: { username: encodeURI(user ...

javascriptjqueryajaxrestrazor-2

Transform a PHP array into a JavaScript array with a variable size

I'm creating a chart for my Yii2 website using Google Chart. I have a PHP array with the following structure: <?php var_dump($a_tg_dat_san_con); ?> ==> Result array(3) { [0]=> array(2) { [0]=> int(1) [1]=> int(0) } [1]=> array(2) ...

javascriptphparraysyii2google-visualization

Is it possible to receive live updates from a MySQL database on a webpage using node.js and socket.io?

I've been following a tutorial that teaches how to receive real-time updates from a MySQL database using Node.js and Socket.io. Check it out here: Everything seems to work fine on the webpage. I can see updates in real-time when I open the page on tw ...

javascriptmysqlnode.jssocket.io

NodeJS child_process.exec not working as expected: function not being executed

I'm having trouble executing a simple 'echo' line using child_process.exec in my code. Here is what I have: var exec = require('child_process').exec; exec('echo "HELLO"', function (error, stdout, stderr) { console.l ...

javascriptnode.jsgruntjschild-process

"Bringing in a Nunjucks Macro - How to Easily Use It

I've been working on a script that renders a nunjucks contact.html template with the following code: let fs = require('fs'); let nj = require('nunjucks'); var contact = fs.readFileSync('./src/contact.html',&a ...

javascripthtmlnode.jsnunjucks

What measures can be taken to prevent the reloading of a subfolder within the same parent in the Fuel

var DataSourceTree = function (options) { this.source = options.source; } DataSourceTree.prototype = { data: function (options, callback) { var self = this; var ...

javascriptasp.netfuelux

Obtaining the login status of users on my website and displaying the number of users along with their names from the database using PHP

Can anyone assist me with figuring out how to retrieve the login status of users on my website and display the count of users along with their names from the database using PHP or jQuery? Alternatively, I am also interested in simply finding out the num ...

javascriptphpjquerymysql

Challenges related to using the require() method in JavaScript

I've been encountering an issue while trying to run the JavaScript client for the Tumblr API from their Github repository. The error message I keep getting is "require not defined" which has led me on a hunt across various forums and websites, includi ...

javascriptnode.jsapitumblr

Encountering a 'Not Found' error message when sending an Ajax post request

Having trouble with an AJAX call in my JS file in Durundal. var dataJSON ={ID : "jo"}; self.js = $.ajax({ type: "POST", dataType: text, url: "http://localhost:53081/api/File", data: JSON.stringify(dataJSON), error: function (xhr, stat ...

c#javascriptajaxrest

The NextJs error message states: "`nextCallback` is not defined as a function

Having trouble setting up Redux with Next.js for the first time. I keep encountering errors no matter what approach I try, and it's becoming difficult to configure properly. It's frustrating to see so many error messages. TypeError: nextCallback ...

javascriptreactjsreduxreact-reduxnext.js

Encoding URLs for LoopBack applications

I am experiencing an issue with the filter I have: { "fields": {"goal":true,"amountPledged": true,"title": true},"where": {"title": {"like":`%${this.state.searchText}%`}} } The this.state.searchText value is bio. According to my understanding, it should ...

javascriptreactjsloopbackjsaxios

What is the procedure for attaching console.log to "l" in vue.js?

The code in main.js includes the following: window.l = function () { } try { window.l = console.log.bind(console) } catch (e) { } It functions properly in non-Vue applications. However, when trying to use it in a Vue action/method like this: l("test") ...

javascriptvue.js