ブログの投稿ログ

2021年
9月
8月
7月
6月

Angularで特殊文字を判定する

今日は業務ないで特殊文字のバリデーションを実装したので復習していきたいと思います!

hoge

codesandbox

// app.component.html

<div class="item-wrap">
  // 文字を打ち込むごとに内容を取得
  <input #box (keyup)="onKey(box.value)" />
  // 取得した文字を出力
  <p>{{text}}</p>
  // 特殊文字が含まれていたら表示
  <p class="red" *ngIf="bool">特殊文字が含まれています</p>
</div>

// app.component.ts

import { Component } from "@angular/core";

@Component({
  selector: "app-root",
  templateUrl: "./app.component.html",
  styleUrls: ["./app.component.css"]
})
export class AppComponent {
  // 入力されたテキスト
  text = "";
  // 特殊文字が入っているかの判定
  bool = false;
  // keyupする度に更新する関数
  onKey(value: string) {
    // 引数から受け取った入力した値を管理する為に代入
    this.text = value;
    // 入力された文言に特殊文字があるかmatchで検索する
    const hoge = this.text.match(/[&.*+\-%?^¥$€{}()・!?:|[\]\\]/g);
    // もし特殊文字が会ったら
    if (hoge) {
      // boolをtrue
      this.bool = true;
    // もし特殊文字が会ったら
    } else {
      // boolをfalse
      this.bool = false;
    }
  }
}

まとめ

普段Angularを触ることが多いのですが、そろそろいいかげんReactを触っていきたいなぁと思う今日この頃です。