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

フロントエンド

jQueryを使用して特定の文字で区切る方法です。 それの応用として、特定の文字列から後ろを削除する方法も紹介します。

文字列の分割

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

var ex =  'あああ,いいい,ううう,えええ,おおお'.split(',');

上記のように書いた場合は

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

という風にカンマごとに分割され配列に格納されます。

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

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

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

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

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

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

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

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

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

文字以降を削除の例

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

上のテキストではpタグのテキストを取得し「|」で分割し、最初の文字のみに書き換えています。 いわば、「|」以降が入らないときはこのような感じです。 わたしはこの状況だったので、取得し・分解し・書き換えるということをしました。詳しくは下へ。

活用方法の例

このブログをリニューアルするときに使用したのですが、右側の【新着記事】の部分で使用しました。

a-blog cmsの【Google Analyticsランキング】モジュールを使用してランキングを出していますが、表示されるのはそのページのtitleタグが表示されます。 わたしのブログだと「エントリー名|カテゴリー名|ブログ名」がtitleタグになっているため長いなと思い「エントリータイトルのみ」にしました。

for (var i = 0; i < 10; i++) {
|s|        var rank = $('.r1 li a').eq(i).text();
|s|        var str = rank.split('|');
|s|        var rank = $('.r1 li a').eq(i).text(str[0]);
}

10位までを表示しているのでfor文で0~9までを回し取得、それをsplitメソッドでエントリータイトルのみにしました。 他に方法があるかもしれませんが、とりあえず応急処置として。


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