jQueryのslice()を使って文字列の最初や最後の1文字を削除する

2018.04.23
プロモーションが含まれています

jQueryのslice()を使って文字列の最初や最後の1文字を削除する

jQueryのslice()を使って文字列の最初や最後の1文字を削除する方法と前後から指定文字分切り出しする方法。
slice()で、配列や、要素を取得する方法も紹介します。

jQuery関連記事

関連記事をもっとみる

sliceで文字列の切り出しをする

JavaScript

文字列.slice(開始位置 [,終了位置] )

第1引数の開始位置と第2引数の終了位置を指定し、文字列を半角全角なども関係なく切り出ししてくれます。
終了位置は省略可能で、省略した場合は最後まで切り出します。

先頭から文字数を指定して削除

JavaScript

var str = "<p>テキスト</p>";
var text = str.slice(4);//"キスト</p>"

開始位置を4文字目から、終了位置が省略されているので最後まで切り出します。結果先頭から4文字が削除されます。

末尾から文字数を指定して削除

JavaScript

var str = "<p>テキスト</p>";
var text = str.slice(0,-4);//"<p>テキスト"

開始位置を0に、終了位置に負の数に指定すると後ろから終了位置分の文字が削除されます。

前後の文字を削除して中間から切り出す

JavaScript

var str = "<p>テキスト</p>";
var text = str.slice(3,-4);//"テキスト"

開始位置を3に、終了位置に-4を指定することで間から切り出せます。
ただ、動的に変更があるテキストの場合、固定の数値ではうまくいかないこともあるのでindexOf()などでテキストを検索し、開始位置をindexOf()で取得した値を入れて動的に変更させる方法がいいと思います。

sliceで配列を取得

slice()で指定した配列の値を取得できます。取得した値は、新たな配列として定義されます。

指定位置から配列の最後までを取得

JavaScript

var array = ['あか', 'あお', 'き', 'みどり'];
var text = arr.slice(2);//['き', 'みどり']

slice()配列の開始位置だけを指定すると指定した位置から最後までを新しい配列として取得できます。

開始位置と終了位置までの配列を取得

JavaScript

var array = ['あか', 'あお', 'き', 'みどり'];
var text = arr.slice(1, 3);//['あお', 'き']

slice()で配列の開始位置と終了位置を指定すると、配列内の指定した間の値を取得し、新しい配列として取得できます。

sliceで要素を取得

配列を取得したとき同じようなイメージで、slice()を使って要素を取得できます。

html

  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
  </ul>

指定位置から要素の最後までを取得

JavaScript

    $('li').slice(2).css('color', 'red');

上記の例のように、開始位置だけを指定すると指定した位置から最後までを取得し、styleを適用しています。この場合、3・4・5が赤くなります。

開始位置と終了位置までの要素を取得

JavaScript

  $('li').slice(1, 3).css('color', 'red');

上記の例のように、開始位置と終了位置を指定すると、開始位置から終了位置までを取得し、styleを適用しています。この場合、2・3が赤くなります。

コメント

タイトルとURLをコピーしました