文字列の長さを取得

console.log('あいうえおかきくけこさし'.length);   //12

たちつてとなにぬね

<p class="jisuu">たちつてとなにぬ</p>


let jisuuh = document.querySelector('.jisuu');
console.log(jisuuh.textContent.length);     //９

入力する都度文字数をカウントする

現在0文字

<textarea class="area1"></textarea>
<p>現在<span class="suuji1">0</span>文字</p>


let text1a =  document.querySelector('.area1');
let text1b = document.querySelector('.suuji1');
text1a.addEventListener('keyup', onKeyUp);
function onKeyUp() {
const textsuu = text1a.value;
text1b.innerHTML = textsuu.length;
}

サロゲートペアの場合はArray.from()を付ける

console.log('𦥑'.length);   //2
console.log(Array.from('𦥑').length);   1

両端の空白を削除

const text2 = '    おはようございます。    '
console.log(text2);
console.log(text2.trim());

文字の間の空白は削除されない

const text3 = '   猫  犬   ';
console.log(text3);
console.log(text3.trim());

末尾の改行コードを取る

const text4 = 'こんにちは\n';
console.log(text4);
console.log(text4.trim());

文字列が何番目にあるかを調べる（0番目から始まる）

const neko1 = '猫が屋根の上をお散歩しております。Meke日記。';
console.log(neko1.indexOf('猫'));   //0番目にある
console.log(neko1.indexOf('散歩'));  //8番目にある

最後に表れるインデックス（何番目）

console.log(neko1.lastIndexOf('お'));  //12

-1は文字列が無いことを意味する

console.log(neko1.indexOf('か'));  //-1
console.log(neko1.indexOf('m'));  //大文字と小文字を区別するため-1

検索開始インデックスを指定すると、そこより後で合致する文字を探し、最初から何文字目にあるかを数える

var neko2 = 'ひなたぼっこをしている猫がいます。猫日記。';
console.log(neko2.indexOf('猫', 10 ));  // 11
console.log(neko2.indexOf('猫', 15 ));  // 17

文字列があるか

const neko3 = '猫専用こたつを用意してください。Tama日記。';
console.log(neko3.includes('こたつ'));   //true
console.log(neko3.includes('雪'));  //false

特定の文字列で始まるか

const neko4 = 'お腹いっぱい食べたい。Mimi日記。';
console.log(neko4.startsWith('お腹'));  //true
console.log(neko4.startsWith('猫'));   //false

特定の文字列で終わるか

const neko5 = '隣のみぃちゃんが遊びに来た。Tama日記。';
console.log(neko5.endsWith('日記。')); //true
console.log(neko5.endsWith('ノート'));  //false

要素に表示

<p class="neko6a"></p>
<p class="neko6b"></p>

const neko6txt = '猫の森に遊びに行った';
const neko6c = document.querySelector('.neko6a');
const neko6d = document.querySelector('.neko6b');
neko6c.innerHTML = neko6txt.includes('猫');
neko6d.innerHTML = neko6txt.includes('こたつ');

文字列を取り出す

console.log('寝ていたら猫の集会に遅れた'.charAt(4));  //ら
console.log('今日はお散歩日和'.charAt());   //引数に入力がない時は0 今

東北・北海道の最初の一文字からリストアップ

最初の一文字を入力

<label><input id="search-word" maxlength="1" type="text"></label>

<div id="list1">
<button data-a="北海道" data-b="ほっかいどう">北海道</button>
<button data-a="青森県" data-b="あおもりけん">青森県</button>
<button data-a="岩手県" data-b="いわてけん">岩手県</button>
<button data-a="宮城県" data-b="みやぎけん">宮城県</button>
<button data-a="秋田県" data-b="あおもりけん">秋田県</button>
<button data-a="山形県" data-b="やまがたけん">山形県</button>
<button data-a="福島県" data-b="ふくしまけん">福島県</button>
</div>

.hide {display:none}


const inputtxt = document.querySelector('#search-word');
const todouhuken = document.querySelectorAll('#list1 button');

inputtxt.addEventListener('keyup', () => {
    const searchtxt = inputtxt.value;
  todouhuken.forEach((element) => {
      if(!searchtxt || searchtxt===''){
        element.classList.remove('hide');
        return;
      }

    const todouhukenmei = element.dataset.a;
    const furigana = element.dataset.b;
      if(
        searchtxt.charAt(0)===todouhukenmei.charAt(0)||
        searchtxt.charAt(0)===furigana.charAt(0)) {
        element.classList.remove('hide');
      } else {
        element.classList.add('hide');
      }
  });
});