全角・半角文字チェック - Angular4で行う JavaScript

                           全角・半角文字チェック - Angular4で行う
![main_image.png](https://qiita-image-store.s3.amazonaws.com/0/117479/c0f97934-61fe-4ff7-2f44-3868e9f2f035.png)

システムで全角・半角文字のチェックは気になるポイントと思います。
下記は簡単なステップで説明しますので、何か不明な点をございましたらご連絡ください。

新しいコンポーネントの生成：

```
$ ng g c zenkaku-hankaku
```

上記のコマンドを実行したあとで、下記のフォルダーで「.css、.html、.ts」ファイルを生成されています。

```
/src/app/zenkaku-hankaku
	#  zenkaku-hankaku.component.css
	<> zenkaku-hankaku.component.html
	TS zenkaku-hankaku.component.spec.ts
	TS zenkaku-hankaku.component.ts
```

次のステップは、**「zenkaku-hankaku.component.ts」**ファイルを開いて,変数と文字チェックロジックの追加。

```js
export class ZenkakuHankakuComponent implements OnInit {
  keyValues:string = '';
  zenKakuKeyValue:string = '' ;
  hanKakuKeyValue:string = '' ;
  zenKakuMessage:string = '' ;
  hanKakuMessage:string = '' ;

  constructor() { }

  ngOnInit() {
  }
}
```

```js
  onKeyTodo(event: any, values) {
    this.keyValues = event.target.value;
    // start - Switch input
    switch (values) {
      case 'zenkaku_name':
        this.zenKakuMessage = '全角のみを入力してください。';
        this.zenKakuKeyValues = 'zenkaku_name';
        this.check2ByteFunc(this.keyValues, values, this.zenKakuKeyValue, this.zenKakuMessage);
      break;
      case 'hankaku_name':
        this.hanKakuMessage = '半角のみを入力してください。';
        this.hanKakuKeyValues = 'hankaku_name';
        this.check1ByteFunc(this.keyValues, values, this.hanKakuKeyValue, this.hanKakuMessage);
        break;
    }
    // end - Switch input
  }
```

```js
// DOUBLE BYTE 全角文字
 // --------------------------------------------------------------------
 // 関数者 : Alok Rawat
 // Function to Check 全角文字
 // ---------------------------------------------------------------------
 check2ByteFunc(val, col_name, header_name , msg) {
  const actual_len = val.length;
  const str_len = this.countLength(val);
  let err_val = '';

  if (parseInt(actual_len)*2 === str_len) {
    this.clearErrMsg(header_name);
  } else {
    for (let i = 0; i <= val.length - 1; i++) {
      if (this.countLength(val[i]) === val[i].length) {
        if (err_val !== '' ) {
          err_val = err_val + ',' + val[i];
        } else {
          err_val = val[i];
        }
      }
    }
  }
}
```

```js
// SINGLE BYTE 半角文字
// --------------------------------------------------------------------
// 関数者 : Alok Rawat
// Function to Check 半角ｶﾅ文字
// ---------------------------------------------------------------------
check1ByteFunc(val, col_name, header_name, msg) {
  // Function to Check 半角カナ
  const reg = new RegExp(/^[ｦ-ﾟ ､0-9a-zA-Z]*$/);  
  if ( val.match(reg)) {
    this.clearErrMsg(header_name);
  }
}
```

他の半角文字を追加したいの場合は、下記のリンクをご参照ください。
https://javascript.programmer-reference.com/js-check-hankaku-kana/

```js
// count the length of the input string
countLength(str) {
  let r = 0;
  for (let i = 0; i < str.length; i++) {
      const c = str.charCodeAt(i);
      // Shift_JIS: 0x0 ～ 0x80, 0xa0 , 0xa1 ～ 0xdf , 0xfd ～ 0xff
      // Unicode : 0x0 ～ 0x80, 0xf8f0, 0xff61 ～ 0xff9f, 0xf8f1 ～ 0xf8f3
      if ( (c >= 0x0 && c < 0x81) || (c === 0xf8f0) || (c >= 0xff61 && c < 0xffa0) || (c >= 0xf8f1 && c < 0xf8f4)) {
          r += 1;
      } else {
          r += 2;
      }
  }
  return r;
}
```

```js
// if input value is valid then clear the error.
clearErrMsg(namekey) {
  if ( namekey === 'zenkaku_name') {
    this.zenKakuMessage = '';
  }
  if ( namekey === 'hankaku_name') {
    this.hanKakuMessage = '';
  }
}
```

**「zenkaku-hankaku.component.html」**ファイルを開いて,textboxとngの設定

```html
<p>
  <u>全角・半角チェック機能確認</u>
</p>
<div class="row">
    <div class="container-fluid">
        <div class="form-group col-sm-6">
            <label class="label-control">名称</label>
            <label label_back_color>(全角のみ)</label>
            <input name="zenkaku_name" type="text" class="form-control"
            (keyup)="onKeyTodo($event,'zenkaku_name')" placeholder="例：山田　太郎" />
            <div class="text-danger" *ngIf="zenKakuKeyValue=='zenkaku_name'">{{ zenKakuMessage }}</div>
        </div>
        <div class="form-group col-sm-6">
            <label class="label-control">ﾒｲｼｮ（ｶﾅ）</label>
            <label label_back_color>(半角のみ)</label>
            <input name="hankaku_name" type="text" class="form-control"
            (keyup)="onKeyTodo($event,'hankaku_name')" placeholder="例：ﾔﾏﾀﾞ ﾀﾛｳ"/>
            <div class="text-danger" *ngIf="hanKakuKeyValue=='hankaku_name'">{{ hanKakuMessage }}</div>
        </div>
    </div>
</div>
```

下記は結果の情報です。
**■全角文字チェック**
1.NGケース：
![zankaku_1.png](https://qiita-image-store.s3.amazonaws.com/0/117479/66bc4465-b669-6b94-4b67-197a66db78d5.png)

２.OKケース:
![zankaku_2.png](https://qiita-image-store.s3.amazonaws.com/0/117479/cc483f43-8417-7e4c-bebc-ad3fc4fe6c13.png)

**■半角文字チェック**
1.NGケース：
![hankaku_1.png](https://qiita-image-store.s3.amazonaws.com/0/117479/f7da2d7a-e750-0876-4949-d8d51ec03fee.png)

２.OKケース:
![hankaku_2.png](https://qiita-image-store.s3.amazonaws.com/0/117479/28af3893-a061-2af8-7eac-6a9ff79e34f1.png)

終わり！！！

:grinning: :grinning:

Enjoy coding!

**Thanks & Best Regards,
Alok Rawat**