jQuery：キャプションの を反映させたい

皆様のアドバイスのおかげで、キャプションの二重入力の手間は省くことができました。
しかし、キャプション内に が入ることとなり、ソースをいじってみましたがうまく反映できず困っています。

HTML
1<div class="sp-slide">
2　<a href="./img/04.jpg" title="オーバーレイ時のキャプション">
3　　<img class="sp-image" src="./img/blank.gif" data-src="./img/04.jpg" data-retina="./img/04.jpg"></a>
4　　<p class="sp-layer sp-black sp-padding">
5　　　写真4の説明文が入ります<br>
6　　　写真4の仕様が入ります。
7　　</p><!--メイン画像表示中のキャプション-->
8</div>

js
1$(function() {
2  $('p.sp-layer').each(function(index, element) {
3    const target = $(element);
4    target.parent().find('a').prop('title', target.text());
5  });
6});

上記の様に”innerHTML"とした場合、画像のようにオーバーレイ時のキャプションはキレイに改行されますが
メイン画像をマウスオーバーした際に表示される説明は も含めてそのまま出力され改行されません。

js
1$(function() {
2  $('p.sp-layer').each(function(index, element) {
3    const target = $(element);
4    target.parent().find('a').prop('title', target.html());
5  });
6});

とした場合は、マウスオーバー時が改行され、オーバーレイ時は改行がされません。
説明下手で申し訳ありません。

どちらの動作であっても、改行されるようにしたいのですが
最悪マウスオーバー時に表示される説明を
非表示でも問題ないのでSliderProでその様な設定があれば併せてご教示ください。

質問が長くなりましたが、よろしくお願いいたします。

x_x

2018/10/29 06:18

の直後には実際に改行コードが入っているのでしょうか？

akinco

2018/10/29 09:06

すみません、 の直後とはどの部分のことでしょうか？htmlのことですか？

x_x

2018/10/29 09:10

そうです。提示コードのように改行してますか？

akinco

2018/10/29 14:42

提示コードのように、実際に改行しています。

kei344

2018/10/30 02:41

回答が付いた質問の編集は慎重に行ってください。質問文のコードについて回答にて指摘があった場合は「追記」し、元のコードを編集する場合も「直したこと」がわかるようにしてください。

akinco

2018/11/06 01:34

ご指摘ありがとうございます。配慮が足らず申し訳ございませんでした。以後気を付けます。

行動規範の内容に同意します

回答3件

いまの感じだとこんな感じですかね
タグを見せたいのではないならhtmlをひろうのではなくtextを拾う

javascrpt
1<script>
2$(function(){
3  $('.sp-slide>a').attr('title',function(){
4    return $(this).next('p').text().replace(/^[　\s]+/mg,"");
5  });
6});
7</script>
8<div class="sp-slide">
9　<a href="./img/04.jpg" title="オーバーレイ時のキャプション">
10　　<img class="sp-image" src="./img/blank.gif" data-src="./img/04.jpg" data-retina="./img/04.jpg"></a>
11　　<p class="sp-layer sp-black sp-padding">
12　　　写真4の説明文が入ります<br>
13　　　写真4の仕様が入ります。
14　　</p>
15</div>

※先頭にある空白文字と全角スペースを削除

投稿2018/10/29 01:42

yambejp

総合スコア114777

akinco

2018/10/29 02:23

ご教示ありがとうございます。申し訳ありません、このコードではキャプションの取得ができませんでした。しかし、余白部分の置換は参考になりました(*´ｴ｀*)！ return this.nextElementSibling.innerHTML.replace(/^[　\s]+/mg,""); とすることで、余分な余白は削除できました。しかし、 はそのままです…