芝生やDIY等のライフハックやWeb制作情報を発信するメディア

メニューを開く

replaceを使って複数回出現する文字列を置換するjs

最初の1個しか置換されない

ほげほげほげほげほげほげほげほげほげほげ

クリックしたら「ほげ」を「もげ」に置換

$(function(){
    'use scrict';
    
    $('p.hoge-btn a').click(function(){
        var $hoge = $('p.hoge').html();
        $('p.hoge').html($hoge.replace('ほげ','もげ'));
        return false;
    });
    
});

該当の文字は全て置換される

もげもげもげもげもげもげもげもげもげもげもげ

クリックしたら「もげ」を「ふが」に置換

$(function(){
    'use scrict';
    
    $('p.moge-btn a').click(function(){
        var $moge = $('p.moge').html();
        $('p.moge').html($moge.replace(/もげ/g,'ふが'));
        return false;
    });
    
});

文字列を複数指定して置換することもできる

ほげほげほげほげほげもげもげもげもげもげ

クリックしたら「ほげ」も「もげ」も「ふが」に置換

$(function(){
    'use scrict';

    $('p.fuga-btn a').click(function(){
        var $fuga = $('p.fuga').html();
        $('p.fuga').html($fuga.replace(/ほげ|もげ/g,'ふが'));
        return false;
    });
    
});

デモの解説記事に戻る

ページの先頭に戻る