javascript 文字列に指定した文字が含まれている位置を取得する
- 作成日 2020.08.09
- 更新日 2022.06.01
- javascript
- javascript
javascriptで、indexOf メソッドを使用して、文字列に指定した文字が含まれている位置を取得するサンプルコードを記述してます。ここでは簡単なindexOfメソッド使い方も記述してます。
環境
- OS windows10 pro 64bit
- Nginx 1.18.0
- ブラウザ chrome 102.0.5005.63
indexOfメソッド使い方
indexOfメソッドは、文字列に指定した文字があれば、その先頭の位置を返してくれます。
※位置は「0」から始まります。
文字列.indexOf( 検索したい文字 [, 検索開始位置])
indexOfメソッド使用例
let str = 'abcde';
console.log( str.indexOf('a') );
// 結果 0
// 0から始まる
console.log( str.indexOf('c') );
// 結果 2
console.log( str.indexOf('de') );
// 結果 3
console.log( str.indexOf('z') );
// 結果 -1
// 結果が無ければ-1が返ってくる
console.log( str.indexOf('A') );
// 結果 -1
// 大文字小文字は区別される
console.log( str.indexOf('c',4 ) );
// 結果 -1
// 検索開始位置に含まれないので-1
サンプルコード
以下は、用意した文字列「hello world」の中からテキストフォームに入力した文字が含まれる位置を表示するサンプルコードとなります。
※cssには「uikit」を使用してます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>mebeeサンプル</title>
<!-- UIkit CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/uikit@3.5.5/dist/css/uikit.min.css" />
<!-- UIkit JS -->
<script src="https://cdn.jsdelivr.net/npm/uikit@3.5.5/dist/js/uikit.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/uikit@3.5.5/dist/js/uikit-icons.min.js"></script>
</head>
<style>
.main {
margin: 0 auto;
margin-top: 200px;
display: flex;
flex-direction: column;
align-items: center;
font-size: 20px;
}
</style>
<script>
function search() {
//hello worldより検索
let str = document.getElementById("txt").textContent;
console.log(str);
//適当な文字列を用意
let search = document.getElementById("textbox").value;
console.log(search);
//innerHTMLを使用して表示
let result = document.getElementById("result");
result.innerHTML = str.indexOf(search);
}
</script>
<body>
<div class="main">
<div class="uk-light uk-background-secondary uk-padding">
<h3 id="txt">hello world</h3>
<p id="result"></p>
<form>
<fieldset class="uk-fieldset">
<div class="uk-margin">
<input id="textbox" class="uk-input" type="text" placeholder="検索する文字列">
</div>
</fieldset>
</form>
<button class="uk-button uk-button-default" onclick="search()">Button</button>
</div>
</div>
</body>
</html>
含まれている場合は位置の番号が表示されます。
const search = () =>{
var str = txt.textContent;
result.innerHTML = str.indexOf(textbox.value);
}
-
前の記事
windows10 nginxをインストールして使用する 2020.08.09
-
次の記事
php7 「declare(strict_types=1)」を使って変数の型を厳格にする 2020.08.09
コメントを書く