jquery - jQueryを使用して文/文字列を単語に分割する

Question

私はセンチス/H1を持っていますが、これを分割して以下のようにする必要があります

元の状態

<h1>This is the heading </h1>

後

<h1>This <br> 
is <br> 
the <br> 
heading </h1>

Answer 1

私はお勧めします：

$('h1').each(
    function(){
        var that = $(this),
            newText = that.text().replace(/\W/g,'<br />');
        that.html(newText);
    });

• JS フィドルのデモ。

参考文献:

• jQuery リファレンス:
  • html().
  • text().
• JavaScript 参照:
  • regular expressions.
  • replace().

Answer 2

$("h1").html( $("h1").text().replace(/ /g,"<br>"))​

Answer 3

$('h1').each(function() {
    var txt = $(this).html().replace(/^\s*(.*?)\s*$/,'$1');
    // this trims the string
    $(this).html(txt.split(/\s+/).join(' <br/>')+' ');
    // this splits the character groups (not containing spaces)
    // and joins them by a br tag, then adds an extra space at the end.
});

代替、および短いバージョン ( VisioNに感謝) :

$('h1').each(function() {
    $(this).html($.trim($(this).html()).split(/\s+/).join(' <br/>')+' ');
});

Answer 4

これを試してください：

var h = $('h1').text().split(' ').join('<br>'); 
$('h1').html(h);