<br>タグで区切られたテキストをそれぞれ<span>で囲みたい

Question

Jqueryを使用して、<br>タグで区切られたテキストをそれぞれ<span>で囲みたいです。

具体的には以下のような動的に出力されるhoge内の構成を、

<p class="hoge">
可変する動的な文字列<br>
可変する動的な文字列<br>
可変する動的な文字列<br>
可変する動的な文字列<br>
</p>

<br>で区切られた文字列をそれぞれ<span>で囲みたいです。

<p class="hoge">
<span>可変する動的な文字列</span>
<span>可変する動的な文字列</span>
<span>可変する動的な文字列</span>
<span>可変する動的な文字列</span>
</p>

「replaceWith」を試したのですが、br部分に空の「<span>」要素が置き換わるだけで文字列を囲むことができませんでした。

$(".hoge br").replaceWith("<span>");

ご教授の程よろしくお願いいたします。

Answer 1

jQueryでテキストノードを扱えるのは限られています。.contents()を使って次のような感じで。

$('.hoge').contents().each(function(index, node) {
  if (node.nodeType === 3) {
    // TEXT_NODE.
    $(node).replaceWith($('<span></span>').text(node.nodeValue));
  } else if (node.nodeName.toLowerCase() === 'br') {
    node.remove();
  }
});

.contents()
http://api.jquery.com/contents/

Answer 2

こんな感じですかね？

$(function(){
  $('.hoge').html(function(){
    return $(this).html().replace(/\n/g,'').split("<br>").filter(function(x){
      return x.match(/\S/);
    }).map(function(x){
      return "<span>"+x+"</span>";
    }).join("");
  });
});

<p class="hoge">
可変する動的な文字列<br>
可変する動的な文字列<br>
可変する動的な文字列<br>
可変する動的な文字列<br>
</p>

Comments

[castail]

ご教授いた内容で実現できました！
感謝いたします。ありがとうございました。