【replace】文字と文字の間にある全角スペースをタグ（brタグ）に変換する方法

今回はテキストの一部を書き換える方法について紹介していきたいと思います。

たとえば下記のように文字と文字の間に全角スペースがあったとします。

名前　テキスト

上記の「名前」と「テキスト」という文字の間には全角スペースがあります。

その全角スペースを<br>タグに変えて改行させたいという場合はその全角スペースを<br>タグに差し替える必要があります。

文字の差し替えをしたい場合はreplaceを使います。

replaceで文字を差し替える

一行の場合

html

<div id="brand" class="brand">名前　テキスト1</div>

javascript

var elem = document.getElementById('brand');
var elem_txt = elem.innerHTML;
var txt_rep = elem_txt.replace(/　/g, '<br>');
elem.innerHTML = txt_rep;

文字列をhtmlとして取得して全角スペースを<br>に変えて差し替える処理になります。

全角スペースを<br>に変える記述は下記になります。

var txt_rep = elem_txt.replace(/　/g, '<br>');

複数行の場合

今度は複数行にまたがる文字を上から全角スペースがあるかどうか判断してあれば<br>タグに変更します。

html

<div class="brand-inner">      
        <div class="item">名前　テキスト1</div>
        <div class="item">名前</div>
        <div class="item">名前　テキスト1</div>
</div> 

javascript

jQuery('.brand-inner > .item').each(function() {
        var item_txt = jQuery(this).text();
        var txt_rep = item_txt.replace(/　/g, '<br>');

        jQuery(this).html(txt_rep);
});

結果

出力結果は下記になります。全角スペースがある場所は<br>が入り改行できています。

名前
テキスト1
名前
名前
テキスト1

サンプルはこちら