Is there a way to check Japanese Kanji in react js

Question

I am building simple word search with react and I am facing a problem with Japanese Kanji Whenever I try to search a Kanji in my input the web app become blank. Is there a way to check a kanji characters in react. Please tell me.

{Data.filter((post) => {
        if (query === '') {
          return;
        } else if (post.romaji.includes(query)) {
          return post;
        } else if (post.kana.includes(query)) {
          return post;
        } else if (post.meaning_mm.includes(query)) {
          return post;
        } else if (post.kanji.includes(query)) {
          return post;
        }  
      }).map((post, index) => (
        <div className="box" key={index}>
          <h2>{post.kanji}</h2>
          <p>{post.kana}</p>
          <p>{post.meaning_mm}</p>
        </div>
      ))}

Answer 1

You can use Regex to check if Japanese text exists in a string. The following regex based on Unicode characters ranges can be used to detect Japanese, Chinese and Korean Characters :

/[\u3040-\u30ff\u3400-\u4dbf\u4e00-\u9fff\uf900-\ufaff\uff66-\uff9f\u3131-\uD79D]/

You can customise the regex Unicode ranges upon your need .

Code sample :

 function App() {
  //this string is used for test 
  let str = "渣打銀行提供一系列迎合你生活需要嘅信用卡";
  

  const hasKanji = (string) => {
    const regex = /[\u3040-\u30ff\u3400-\u4dbf\u4e00-\u9fff\uf900-\ufaff\uff66-\uff9f\u3131-\uD79D]/
    return string.match(regex) ? true : false  ; 
  };

  return (
    <div className="App">
        { hasKanji(str) ? "Yes Has Knaji" : "Nope "}
    </div>
  );
}