jQueryで文字列を分割したり、特定の文字以降を削除する

フロントエンド
jQueryで文字列を分割したり、特定の文字以降を削除する

jQueryを使用して特定の文字で区切る方法です。 また、、特定の文字列から後ろを削除したり、特定の文字以外の文字列の取得方法もご紹介します。

文字列の分割

splitメソッドを使用して文字列を分割します。 split('')のカッコ内に書いた文字を基準に分割されます。

var array =  'あああ|いいい|ううう|えええ|おおお'.split('|');

上記のように書いた場合には【'あああ', 'いいい', 'ううう','えええ','おおお'】が【 |(パイプ)】で分割され下記のように配列に格納されます。

['あああ', 'いいい', 'ううう','えええ','おおお'];

特定の個数だけ配列にいれたい

先ほどの場合だと「あ〜お」まで配列に格納されましたが、特定の個数のみにすることも可能です。

var array = 'あああ|いいい|ううう|えええ|おおお'.split('|',3);
結果:['あああ', 'いいい', 'ううう'];

上記のように書くと前から3つのみを配列に入れることができます。

分割後の特定の文字へのアクセス

配列に格納されますので通常の配列へのアクセスと同じです。 また、変数に入れておけば、個数も確認できます。

var array =  'あああ|いいい|ううう|えええ|おおお'.split('|');
array.length  //分割した個数
array[0] //あああ
array[1] //いいい

応用編:特定の文字以降を削除

特定の文字を削除といっても上と同じように分割をするのみです。 削除したい文字の前で区切り、必要な文字のみを配列から取り出すことで特定の文字以降を削除することができます。

文字以降を削除の例

var array = $('p').text();  //例:タイトル|カテゴリー名|ブログ名
var str = array.split('|');  // ['タイトル','カテゴリー名','ブログ名'];
$('p').text(str[0]);   // タイトル

上記ではpタグのテキストを取得し「 | (パイプ)」で分割し、最初の文字のみに書き換えています。

複数の要素で分割を実行する

リストのようなものを複数まとめて処理する方法をご紹介します。

<ul>
        <li>エントリー名|カテゴリー名|ブログ名</li>
        <li>エントリー名|カテゴリー名|ブログ名</li>
        <li>エントリー名|カテゴリー名|ブログ名</li>
        <li>エントリー名|カテゴリー名|ブログ名</li>
</ul>

特定の個数の場合for文でも可能ですが、個数が可変の場合や個数がわからない場合にはeachを使用しましょう。

$('ul li').each(function() {
        var txt = $(this).text();
        var str = txt.split('|');
        $(this).text(str[0]);
});

eachでliをくりかえしsplitで「エントリー名」だけにする処理を行なっています。 色々なメソッドと合わせて使うことで柔軟に色々な対応ができるようになります。


jQuery

この記事の読んだ方におすすめ