範囲を指定して文字を削除したい

Question

<br>から<span>の前までを削除して、名前だけにしたいです。

<li>
    <p class="name">
      名前<br>苗字
      <span>出身</span>
    </p>
</li>

Comments

[x_x]

<br>から<span>の前までを削除したら「名前<span>出身</span>」だと思うのですが、いいのでしょうか？

[a1291]

はい。そちらでお願いします。お手数おかけします。

Answer 1

###CSSだけで無理やり消す（隠す）方法

spanに白背景をつけて、苗字の上に被せる。

p.name {
	position:relative;
}
p.name span {
	position:absolute;
	left:0;
	bottom:0;
	padding-right:3em;
	background-color:#fff;
}

あら簡単(｡´ސު​｀｡)

##冗談はさておきjQueryでやる場合

$(function() {
  var parentVal = $('.name').html().split('<br>')[0]; // A.<br>より前の文字列を取得
  var spanVal = $('.name span').text(); // B.<span>の中身を取得
  $('.name').html(parentVal+'<br>'+spanVal); // <p>の中身をA+Bに差替え
});

1行で書いてもOK

$(function() {
  $('.name').html($('.name').html().split('<br>')[0]+'<br>'+$('.name span').text());
});

Comments

[a1291]

対応遅くなり申し訳ありませんでした。こちらで無事対応できました！ありがとうございます！

[x_x]

この回答では<br>が残り、要件を満たさないと思いますが？

Answer 2

最初の(テキスト)ノードだけ抜き出すという考え方もあります

• 案1

$(function(){
  $('.name').html(function(){return $(this).contents().first().text()});
});

• 案2

$(function(){
  $('.name').each(function(){
    $(this).html($(this).get(0).firstChild);
  });
});

<ul>
<li>
<p class="name">
名前1<br>苗字1
<span>出身</span>
</p>
</li>
<li>
<p class="name">
名前2<br>苗字2
<span>出身</span>
</p>
</li>
<li>
<p class="name">
名前3<br>苗字3
<span>出身</span>
</p>
</li>
</ul>

修正

完全に勘違い最初の<br>と2番目の文字列を削除するんですね
これでどうでしょう？

  $('.name').each(function(){
    $(this).contents().eq(2).remove().end().filter('br').eq(0).remove();
  });

Comments

[yambejp]

contents()から要素を抜き出すという考え方もできるので案を2つあげておきました

[yambejp]

すみません、仕様を間違えていたので修正しました

Answer 3

<script>
$(function() {
  $('.name').contents().filter(function() {
    // 3: TextNode
    return this.nodeType !== 3 && this.nodeName.toUpperCase() !== 'BR';
  }).remove();
})();
</script>

で行けると思います。

Comments

[mattn]

あー。質問の理解が間違ってました。。。あとで直します。

[mattn]

場合によっては SPAN を見つける、とした方がいいかも。

Answer 4

$('.name').each(function(index, element) {
  element.innerHTML = element.innerHTML.replace(/<br[\s\S]+<span/, '<span');
});

びっくりするほどほかの方と回答が違うけれども、「名前<span>出身</span>」になるのであればこんな感じになるはず。