【javascript】正規表現とmatchをつかって特定の文字だけスタイルを変える

正規表現のsample
正規表現 | 意味 |
---|---|
/^[ぁ-んー]*$/ | 全角ひらがな(空文字OK) |
/[゠-ヿ]+/g/ | 全角カタカナ(空文字OK) |
/^[ァ-ン゙゚\-]*$/ | 半角カタカナ(空文字OK) |
/^[^\x20-\x7e]*$/ | 全角文字のみ(空文字OK) |
/^[0-9]*$/ | 半角数値のみ(空文字OK) |
/^[0-9]+$/ | 半角数値のみ(空文字NG) |
/^[a-zA-Z]*$/ | 半角英字のみ(空文字OK) |
/^[a-zA-Z]+$/ | 半角英字のみ(空文字NG) |
/^[0-9a-zA-Z]*$/ | 半角英数字のみ(空文字OK) |
/^[a-zA-Z0-9!-/:-@¥[-`{-~]*$/ | 半角英数記号のみ(空文字OK) |
/^([a-zA-Z0-9]{8,})$/ | 8文字以上の半角英数字 |
/^([a-zA-Z0-9]{6,8})$/ | 6文字以上8文字以内の半角英数字 |
/^([0-9]{0,8})$/ | 8文字以下の半角数値 |
/^[0-9]{8}$/ | 8文字の半角数値 |
/^https?:\/\/ | URL |
/^\d{3}-\d{4}$/ | 郵便番号(999-9999形式) |
/^\d{1,3}(\.\d{1,3}){3}$/ | IP(999.999.999.999形式) |
/^([1-9][0-9]*|0)(\.[0-9]+)?$/ | 正の小数 |
/^-?([1-9][0-9]*|0)(\.[0-9]+)?$/ | 正・負の小数 |
参考

特定の文字だけスタイルを変える
【javascript】正規表現とmatchをつかって特定の文字だけスタイルを変える。2021-12-1
それぞれの文字の正規表現を宣言
const hiragana =/^[ぁ-んー]*$/;
const katakana = /[゠-ヿ]+/g;
const number = /^[0-9]*$/;
const alph = /^[a-zA-Z]*$/;
文字を判定し、その文字だけスタイルを当てる関数
const text = document.querySelector(".text"); // 文字を表示させる要素
const texts = text.textContent; // 文字を取得
function matchTexts(e){ // e の部分に正規表現を当てはめる
let textsArray = [];
text.textContent = "";
for (let i = 0; i < texts.split("").length; i++) {
const textT = texts.split("")[i];
if (textT.match(e)) { // e の部分に正規表現を当てはめる
// 特定の文字にクラスredをあてる
textsArray.push('<span class="red">' + textT + "</span>");
} else {
textsArray.push(textT);
}
}
const result = textsArray.join("");
text.innerHTML = result;
}
参考

ひらがなだけスタイルを変える
【javascript】正規表現とmatchをつかって特定の文字だけスタイルを変える。2021-12-1
matchTexts(hiragana);
カタカナだけスタイルを変える
【javascript】正規表現とmatchをつかって特定の文字だけスタイルを変える。2021-12-1
matchTexts(katakana);
数字だけスタイルを変える
【javascript】正規表現とmatchをつかって特定の文字だけスタイルを変える。2021-12-1
matchTexts(number);
アルファベットだけスタイルを変える
【javascript】正規表現とmatchをつかって特定の文字だけスタイルを変える。2021-12-1
matchTexts(alph);

正規表現を使えば、いろいろ文字を判定し、スタイルを変えたり、不必要なものを削除したりできます。
フォーム入力等で、正規表現を使いエラーを見つけ、バリデーションさせることができます。
こんな記事も読まれています。
-
【HTML】【CSS】【javascript】電卓の作り方
電卓のソースコードを2つ紹介します。javascriptはわずか数行で書けます。
-
【JacvaScript】【CSS】たった4行のJavaScriptでできるハンバーガーメニューの作り方
たった4行のJavaScriptで作るハンバーガーメニューの作り方について紹介します。✖をつくるには、transform-originがポイントです。
- リンク
-
波紋エフェクトを表現するjqueryのripples-min.jsの使い方
jqueryのripples-min.jsを使うと簡単に水面の波紋を表現できます。波紋の広がりの速度、波紋の大きさ、波紋のブレの値を変えていろいろ表現させると面白いです。
-
【Javascript】querySelectorAllで要素を取得し、クリックしたら、クラスを追加したり、削除したりする方法。
JavascriptのquerySelectorAllで要素を取得し、クリックしたら、クラスを追加したり、削除したりする方法について解説します。querySelectorと同じように書いてしまうとエラーがでます。forEachを使うとすべてに適用できます。
- リンク
-
要素の高さを取得する方法。getBoundingClientRectとは?window.innerHeightとは?window.pageYOffsetとは?
要素の高さを取得する方法について解説します。getBoundingClientRect、window.innerHeight、window.pageYOffsetについて理解し、要素がいつ画面に現れるかを把握できるようにしましょう。
-
Javascriptを使ったページネーションの実装
トップページの記事が増えてきたので、何とかページネーションで最新の記事だけを表示できないかと思っていたら、いい記事を発見しました。カスタマイズして実装することができました。
- リンク
-
【Javascript】マウスの指す(X, Y)座標とドラッグ & ドロップを理解する
マウスの指す(X, Y)座標とドラッグ & ドロップについて解説します。mousedown, mouseover, mousemove, mouseupを使います。
-
【javascript】連想配列をテーブルできれいに表示する方法
javascript(Object.entries)を使って、連想配列の中身をテーブルできれいに表示する方法について紹介します。
- リンク