javascript 文字列を除去する
- 2020.11.18
- javascript
- javascript

javascriptで、replaceメソッドを使用して、指定した文字列を除去するサンプルコードを記述してます。
環境
- OS windows10 pro 64bit
- Apache 2.4.43
- ブラウザ chrome 99.0.4844.84
replaceメソッド使い方
replaceメソッドを使用すると、正規表現を使用して、指定した文字を除去することが可能です。
var result = str.replace( /除去したい文字列/g , '' ) ;
replaceメソッド使い方
var str = 'mebee';
var result = str.replace( /e/g , '' ) ;
console.log(result); // mb
var str = 'mebee';
var result = str.replace( /me/g , '' ) ;
console.log(result); // bee
RegExpを使用しても同様の結果が得られます。
var str = 'mebee';
var result = str.replace(new RegExp('e','g'), '');
console.log(result); // mb
100万回ずつ実行してみた結果は「正規表現」を使用した方が、少しパフォーマンスは良さそうです。
実行回数:1000000回 関数名:正規表現 実行時間:111(ms)
実行回数:1000000回 関数名:RegExp 実行時間:180(ms)
サンプルコード
以下は、
「除去」ボタンをクリックすると、文字列「mebee」からフォームに入力された文字列を除去して表示する
サンプルコードとなります。
※cssには「bootstrap material」を使用してます。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>mebeeサンプル</title>
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Material+Icons">
<link rel="stylesheet"
href="https://unpkg.com/bootstrap-material-design@4.1.1/dist/css/bootstrap-material-design.min.css">
</head>
<style>
.main {
margin: 0 auto;
margin-top: 200px;
display: flex;
flex-direction: column;
align-items: center;
font-size: 30px;
}
</style>
<script>
function hoge() {
// フォームの値を取得
var str = document.getElementById('str').value;
// 除去される前の文字列を取得
var mebee =document.getElementsByClassName('badge')[0].textContent;
// フォームから入力された文字列を除去
var result = mebee.replace(new RegExp(str,'g'), '');
// 表示
document.getElementsByClassName('badge')[1].textContent = (result);
}
// クリックイベントの設定
window.onload = function () {
// ボタンを取得
var elm = document.getElementById('btn');
// クリックイベントを登録
elm.onclick = function () {
hoge();
};
}
</script>
<body>
<div class="main">
<h2 class="badge badge-primary">mebee</h2>
<h2 class="badge badge-primary">除去後の文字列</h2>
<div class="form-group">
<label for="formGroupExampleInput" class="bmd-label-floating">除去する文字列</label>
<input id="str" type="text" class="form-control">
</div>
<button id="btn" type="button" class="btn btn-raised btn-danger">
除去
</button>
</div>
</body>
</html>
文字列が除去されていることが確認できます。

-
前の記事
python 現在時刻のUNIX時間(エポック秒)を取得する 2020.11.18
-
次の記事
C# カレントディレクトリを取得する 2020.11.18
コメントを書く