JavaScriptで文字列から対象の文字を取り出すcharAtメソッドの使い方

charAtメソッドは指定したインデックス(位置)にある文字列を取得します。

構文

メソッド意味返り値
文字列.charAt([インデックス(省略可)])指定したインデックスの文字を取得する。インデックスを省略したときは最初の文字文字
charAt()メソッド

サンプルコード

Output
charAt(‘JavaScript’)
charAt(‘勉強’)
HTML
<div class="container my-5">
  <table class="table">
    <tr>
      <th>charAt('JavaScript')</th>
      <td class="result1"></td>
    </tr>
    <tr>
      <th>charAt('勉強')</th>
      <td class="result2"></td>
    </tr>
  </table>
</div>
JavaScript
const targetString = 'JavaScriptを勉強する';
document.querySelector('.result1').textContent = targetString.charAt('1');
document.querySelector('.result2').textContent = targetString.charAt('0');

任意の文字を入力すると、その文字に合致する都道府県が出てくるサンプルコードを紹介します。

Output
HTML
<section class="searchwrap">
 <label>県名の最初の一文字を入力してください(漢字または平仮名) <input id="search-word-input" maxlength="1" type="text"></label>
</section>
<div id="prefecture-list">
  <button data-name="北海道" data-phonetic="ほっかいどう">北海道</button>
  <button data-name="青森" data-phonetic="あおもり">青森</button>
  <button data-name="岩手" data-phonetic="いわて">岩手</button>
  <button data-name="宮城" data-phonetic="みやぎ">宮城</button>
  <button data-name="秋田" data-phonetic="あきた">秋田</button>
  <button data-name="山形" data-phonetic="やまがた">山形</button>
  <button data-name="福島" data-phonetic="ふくしま">福島</button>
  <button data-name="茨城" data-phonetic="いばらき">茨城</button>
  <button data-name="栃木" data-phonetic="とちぎ">栃木</button>
  <button data-name="群馬" data-phonetic="ぐんま">群馬</button>
  <button data-name="埼玉" data-phonetic="さいたま">埼玉</button>
  <button data-name="千葉" data-phonetic="ちば">千葉</button>
  <button data-name="東京" data-phonetic="とうきょうと">東京</button>
  <button data-name="神奈川" data-phonetic="かながわ">神奈川</button>
  <button data-name="新潟" data-phonetic="にいがた">新潟</button>
  <button data-name="富山" data-phonetic="とやま">富山</button>
  <button data-name="石川" data-phonetic="いしかわ">石川</button>
  <button data-name="福井" data-phonetic="ふくい">福井</button>
  <button data-name="山梨" data-phonetic="やまなし">山梨</button>
  <button data-name="長野" data-phonetic="ながの">長野</button>
  <button data-name="岐阜" data-phonetic="ぎふ">岐阜</button>
  <button data-name="静岡" data-phonetic="しずおか">静岡</button>
  <button data-name="愛知" data-phonetic="あいち">愛知</button>
  <button data-name="三重" data-phonetic="みえ">三重</button>
  <button data-name="滋賀" data-phonetic="しが">滋賀</button>
  <button data-name="京都" data-phonetic="きょうと">京都</button>
  <button data-name="大阪" data-phonetic="おおさか">大阪</button>
  <button data-name="兵庫" data-phonetic="ひょうご">兵庫</button>
  <button data-name="奈良" data-phonetic="なら">奈良</button>
  <button data-name="和歌山" data-phonetic="わかやま">和歌山</button>
  <button data-name="鳥取" data-phonetic="とっとり">鳥取</button>
  <button data-name="島根" data-phonetic="しまね">島根</button>
  <button data-name="岡山" data-phonetic="おかやま">岡山</button>
  <button data-name="広島" data-phonetic="ひろしま">広島</button>
  <button data-name="山口" data-phonetic="やまぐち">山口</button>
  <button data-name="徳島" data-phonetic="とくしま">徳島</button>
  <button data-name="香川" data-phonetic="かがわ">香川</button>
  <button data-name="愛媛" data-phonetic="えひめ">愛媛</button>
  <button data-name="高知" data-phonetic="こうち">高知</button>
  <button data-name="福岡" data-phonetic="ふくおか">福岡</button>
  <button data-name="佐賀" data-phonetic="さが">佐賀</button>
  <button data-name="長崎" data-phonetic="ながさき">長崎</button>
  <button data-name="熊本" data-phonetic="くまもと">熊本</button>
  <button data-name="大分" data-phonetic="おおいた">大分</button>
  <button data-name="宮崎" data-phonetic="みやぎ">宮崎</button>
  <button data-name="鹿児島" data-phonetic="かごしま">鹿児島</button>
  <button data-name="沖縄" data-phonetic="おきなわ">沖縄</button>
</div>
SCSS

body {font-family: 'Quicksand', 'Kosugi Maru', sans-serif;line-height: 1.8;}

section.searchwrap {
  padding: 20px;
  position: sticky;
  top: 0;
  background-color: #576574;
  text-align: center;
  color: white;
  font-size: 22px;
  margin-bottom: 10px;
  box-shadow: black 0 0 5px;
	#search-word-input {
  width: 60px;
  height: 30px;
  font-size: 30px;
 }
}

#prefecture-list {
  display: grid;
  height: 100%;
  gap: 5px;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  grid-auto-rows: 72px;
  align-content: center;
  padding: 20px;
  overflow-y: scroll;
	button {
  --background-color: #fff;
  --color: #576574;
  --transition: all .3s;
  margin-bottom: 10px;
  background-color: var(--background-color);
  padding: 10px;
  color: var(--color);
  border: 1px solid #576574;
  cursor: pointer;
  width: 120px;
  transition: var(--transition);
		&:hover {
			transition: var(--transition);
			color: var(--background-color);
			background-color: var(--color);
		}
	}
	.hide {
		display: none;
	}
}
JavaScript
/** 検索語 */
const searchWordText = document.querySelector('#search-word-input');

/** 県名のリスト */
const searchWordList = document.querySelectorAll('#prefecture-list button');

//初期化処理(都道府県を全て非表示に)
window.onload = function() {
	// 県名リストについてループ
  // elementはそれぞれの要素にあたる
  searchWordList.forEach((element) => {
      element.classList.add('hide');
			return;
    });
}

// 文字が入力される度に、内容のチェックを行う
searchWordText.addEventListener('keyup', () => {
  // 検索語の最初
  const searchWord = searchWordText.value;

  // 県名リストについてループ
  // elementはそれぞれの要素にあたる
  searchWordList.forEach((element) => {
    // 検索語がなければ、全ての要素を非表示にする
    if (!searchWord || searchWord === '') {
      element.classList.add('hide');
      return;
    }

    // 件名を取得
    const prefectureName = element.dataset.name;
    // ふりがなを取得
    const phonetic = element.dataset.phonetic;

    // 検索語の最初の一文字が一致するかどうかで、hideクラスの付与を決定する
    // hideクラスが付与された要素は、画面上から削除される
    if (
      searchWord.charAt(0) === prefectureName.charAt(0) ||
      searchWord.charAt(0) === phonetic.charAt(0)
    ) {
      // 検索語の最初の一文字が一致する場合、「hide」クラスを除去
      element.classList.remove('hide');
    } else {
      // 検索語の最初の一文字が一致しない場合、「hide」クラスを追加
      element.classList.add('hide');
    }
  });
});
インストラクター
コメント

コメントを残す