javascript 半角カタカナのチェックを行う

作成日 2020.12.31
更新日 2022.08.01
javascript
javascript

javascriptで、正規表現を用いて半角カタカナのチェックを行うサンプルコードを記述してます。

1. 環境
2. 半角カタカナのチェック
3. サンプルコード
4. コード簡潔化

環境

OS windows10 pro 64bit
Apache 2.4.43
ブラウザ chrome 103.0.5060.134

Javascript サンプル集はこちら

半角カタカナのチェック

正規表現を使用して、チェックを行うことが可能です。

const str = "ｦｧｨｩｪｫｬｭｮｯｰｱｲｳｴｵｶｷｸｹｺｻｼｽｾｿﾀﾁﾂﾃﾄﾅﾆﾇﾈﾉﾊﾋﾌﾍﾎﾏﾐﾑﾒﾓﾔﾕﾖﾗﾘﾙﾚﾛﾜﾝﾞﾟ";

// 半角カタカナチェック
if (str.match(/^[ｦ-ﾟ]*$/)) {      
  //半角カタカナ
  console.log("半角カタカナです");
} else {
  //半角カタカナ以外
  console.log("半角カタカナではありません");
}

// 結果 半角カタカナです

三項演算子を使用して1行で記述することも可能です。

(str.match(/^[ｦ-ﾟ]*$/)) ? console.log("半角カタカナです") : console.log("半角カタカナではありません")

三項演算子を使ってif文を1行で書く

関数化して、複数のパターンをチェックしてみます。
※ここでは「空文字」と「null」の判定も行ってます。「null」の場合はチェックしないと以下のパターンの場合「半角カタカナ」と判定されます。

katakanaCheck("ｱｲｳ") // 半角カタカナです
katakanaCheck("-") // 半角カタカナではありません
katakanaCheck("アイウ") // 半角カタカナではありません
katakanaCheck("あいう") // 半角カタカナではありません
katakanaCheck("アいう") // 半角カタカナではありません
katakanaCheck("123") // 半角カタカナではありません
katakanaCheck("abc") // 半角カタカナではありません
katakanaCheck("漢字") // 半角カタカナではありません
katakanaCheck("。") // 半角カタカナではありません
katakanaCheck("、") // 半角カタカナではありません
katakanaCheck("ー") // 半角カタカナではありません
katakanaCheck("") // nullか空文字です
katakanaCheck(null) // nullか空文字です

function katakanaCheck(str){  
  
  if (str) {
    if (str.match(/^[ｦ-ﾟ]*$/)) {      
      //半角カタカナ
      console.log("半角カタカナです");
    } else {
      //半角カタカナ以外
      console.log("半角カタカナではありません");
    }
  }else{
    console.log("nullか空文字です");
  }
}

判定されていることが確認できます。

サンプルコード

以下は、
「判定」ボタンをクリックすると、フォームに入力したテキストデータが半角カタカナであるかを判定する
サンプルコードとなります。

※cssには「bootstrap material」を使用してます。

<!DOCTYPE html>
<html lang="ja">

<head>
  <meta charset="utf-8">
  <title>mebeeサンプル</title>
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons">
  <link rel="stylesheet"
    href="https://unpkg.com/bootstrap-material-design@4.1.1/dist/css/bootstrap-material-design.min.css"
    integrity="sha384-wXznGJNEXNG1NFsbm0ugrLFMQPWswR3lds2VeinahP8N0zJw9VWSopbjv2x7WCvX" crossorigin="anonymous">
</head>
<style>
  .main {
    margin: 0 auto;
    margin-top: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 25px;
    width: 500px;
  }
</style>
<script>

  function hoge() {

    // フォームの値を取得
    let str = document.getElementById('str').value;

    // 表示用の要素
    let obj = document.getElementsByClassName('badge');

    // 半角カタカナチェック
    if (str.match(/^[ｦ-ﾟ]*$/)) {
      //半角カタカナ
      obj[0].textContent = "半角カタカナです";
    } else {
      //半角カタカナ以外
      obj[0].textContent = "半角カタカナではありません";
    }

  }

</script>

<body>
  <div class="main">

    <h2><span class="badge badge-success">判定結果</span></h2>

    <form>
      <div class="form-group">
        <label for="formGroupExampleInput" class="bmd-label-floating">文字列</label>
        <input id="str" type="text" class="form-control">
      </div>
    </form>

    <button onclick="hoge()" type="button" class="btn btn-raised btn-danger">
      判定
    </button>

  </div>
</body>

</html>

判定されていることが確認できます。

コード簡潔化

アロー関数や、document.getElementByIdを省略して、以下のように簡潔に記述することも可能です。

<script>

  const hoge = () => {

    // document.getElementById省略
    const val = str.value;
    
    const obj = document.getElementsByClassName('badge');

    // 三項演算子
    (val.match(/^[ｦ-ﾟ]*$/)) ? obj[0].textContent = "半角カタカナです" : obj[0].textContent = "半角カタカナではありません";    

  }

</script>

アロー関数の使い方

document.getElementByIdの省略して記述する