質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Q&A

解決済

1回答

1026閲覧

対象文字列をspanで囲みたい

pipipi777

総合スコア7

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

0グッド

0クリップ

投稿2019/10/10 01:21

http://ugokay01.wpblog.jp/blog-comment-res-anchor-popup/
および、
https://teratail.com/questions/78880
を参考にしながら、bbpressでレスアンカー付きの投稿があったら、返信先のコメントをポップアップで表示する機能を実装しようとしています。

ですが、本来ならコメント内のレスアンカーがspanで囲まれるはずが囲まれません。

以下がコードですが、何が原因でできないのでしょうか?
お力添えいただけますと幸いです。よろしくお願いいたします。

html

1<div class="bbp-body"> 2 <div class="reply-box" id="1"> 3 <div id="post-xx" class="bbp-reply-header"> 4 <div class="bbp-meta"> 5 <div class="comment-ry"> 6 <span class="num">1</span><a>返信</a> 7 </div> 8 </div> 9 </div> 10 <div id="res_1" class="reply-container"> 11 <div class="bbp-reply-content"> 12 <p>コメント</p> 13 </div> 14 </div> 15 </div> 16 17 <div class="reply-box" id="2"> 18 <div id="post-xx" class="bbp-reply-header"> 19 <div class="bbp-meta"> 20 <div class="comment-ry"> 21 <span class="num">2</span><a>返信</a> 22 </div> 23 </div> 24 </div> 25 <div id="res_2" class="reply-container"> 26 <div class="bbp-reply-content"> 27 <p>>>1<br> <!-- この >>1 をspanで囲みたい --> 28 [1]のコメントに返信</p> 29 </div> 30 </div> 31 </div> 32</div>

javascript

1jQuery(document).ready(function($) { 2 var 3 // 設定 4 selCommentContent = '.bbp-reply-content > p', // コメント本文のjQueryセレクタ 5 selComment = '.reply-box', // コメント1件全体のjQueryセレクタ 6 strResAnchor = '>>', // コメレスアンカーの開始文字 7 flagJump = true, // コメレスアンカークリック時にジャンプ(true:する, false:しない) 8 flagZenkaku = true, // 全角数字もコメレスアンカーとして扱う(true:する, false:しない) 9 10 // その他変数 11 reResAnchor, // コメレスアンカーにマッチする正規表現オブジェクト 12 strResAnchorID, // コメレスアンカーの数字部分 13 jqResAnchor, // コメレスアンカーのjQueryオブジェクト 14 jqResTarget; // コメレスアンカー参照先のjQueryオブジェクト 15 16 // 正規表現オブジェクトの生成 17 if (flagZenkaku) { 18 reResAnchor = new RegExp('(' + strResAnchor + ')((?:[0-9]+|[0-9]+))', 'g'); 19 } else { 20 reResAnchor = new RegExp('(' + strResAnchor + ')([0-9]+)', 'g'); 21 } 22 23 // コメント本文のレスアンカーをspan要素に置換(res-anchorクラスを付加) 24 $(selCommentContent).each(function() { 25 $(this).html( 26 $(this).html().replace(reResAnchor, function() { 27 if (flagZenkaku && /[0-9]+/.test(arguments[2])) { // レスアンカーの数字を半角化 28 strResAnchorID = arguments[2].replace(/[0-9]/g, function(match){ 29 return String.fromCharCode(match.charCodeAt(0)-0xFEE0); 30 }) 31 } else { 32 strResAnchorID = arguments[2]; 33 } 34 return '<span class="res-anchor" data-resid="' + strResAnchorID + '">' + arguments[0] + '</span>'; 35 //このspanタグで>>1を囲みたかった 36 }) 37 ); 38 }); 39 40//以下略 41 42});

####試したこと
selCommentContentやselCommentの指定を変えてみたりしましたが、変化はありませんでした。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

レスアンカーの目印にしている>は、htmlでは「特殊文字」に該当しますので、

・正規表現で指定した>>

・jqueryで.html()を使って取得したHTMLテキストの中にいるはずの>>

は、マッチしません。

jqueryで.html()を使って取得したHTMLテキストが、どんなものになっているか、console.log等で確認してみてください。

投稿2019/10/10 03:31

mix-peach

総合スコア1910

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

pipipi777

2019/10/10 03:50

strResAnchorを文字参照で指定したら無事できました…!ありがとうございました!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問