$(":contains(文字列)")で末端の子要素のみ取得する方法

やりたいこと

HTML全体から、特定の文字列を部分検索して別のHTMLに置き換えたいです。

一つのドキュメントに複数の文字列がヒットする場合、全て置換。
特定のタグ（<p>や<div>）に依存した縛りはなし。置換対象を親にもつHTMLタグは特定できません。

やっていること

以下、サンプルコードです。

HTML
1<html>
2	<body>
3	<div>
4		<p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
5		<p>サンプルはこちら<sup>®</sup></p>
6	</div>
7	<ul>
8		<li>サンプルはこちら</li>
9		<li>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</li>
10		<li>吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。</li>
11		<li>かしその当時は何という考もなかったから別段恐しいとも思わなかった。<b>サンプルはこちら</b></li>
12	</ul>
13	</body>
14</html>

「サンプルはこちら」という文章を、Aタグで囲んでリンク設定したいと思います。
途中までですが、containsメソッドを使って以下のJSを書いています。

javascript
1jQuery(function($){
2  replaceInit();
3
4  function replaceInit(){
5    getText()
6  };
7
8  function getText(){
9    var targetStr = 'サンプルはこちら';
10    var targetElmArray = $(":contains('" + targetStr + "')");
11
12    $(targetElmArray).each(function(index) {
13      console.log($(targetElmArray[index]).text());
14    });
15  }
16});

JS処理完了後は以下のようなHTMLを想定しています。

html
1
2<html>
3	<body>
4	<div>
5		<p>この文章はダミーです。文字の大きさ、量、字間、行間等を確認するために入れています。</p>
6		<p><a href="#">サンプルはこちら</a><sup>®</sup></p>
7	</div>
8	<ul>
9		<li><a href="#">サンプルはこちら</a></li>
10		<li>吾輩は猫である。名前はまだ無い。どこで生れたかとんと見当がつかぬ。何でも薄暗いじめじめした所でニャーニャー泣いていた事だけは記憶している。</li>
11		<li>吾輩はここで始めて人間というものを見た。しかもあとで聞くとそれは書生という人間中で一番獰悪な種族であったそうだ。この書生というのは時々我々を捕えて煮て食うという話である。</li>
12		<li>かしその当時は何という考もなかったから別段恐しいとも思わなかった。<b><a href="#">サンプルはこちら</a></b></li>
13	</ul>
14	</body>
15</html>

わからないこと

containsメソッドを使った場合、html要素やbody要素が選択される仕様のようです。
0. containsメソッドで「サンプルはこちら」という文章を持つ直近の親要素を洗い出す

「サンプルはこちら」という文章を持つ直近の親要素を一つ選択する
選択した親要素の中にある「サンプルはこちら」を<a href="#">サンプルはこちら</a>に置き換える
2と3をヒット数分繰り返す

というロジックを考えていたのですが、早くも1で詰まってしまっています。
containsメソッドにこだわる必要はないので、ほかにいい手や「containsメソッドでこうやれば直近の親だけ洗い出せる」というやり方があれば教えてください。
よろしくお願いいたします。

yambejp

2020/10/30 06:56 編集

元HTMLを見る限り「サンプルはこちら」を含む要素の親要素に「サンプルはこちら」を含むものは見当たりません結果としてどうなればいいかも具体的に書いてみると回答が付きやすいでしょう

yambejp

2020/10/30 08:50

想定結果拝見しました。テキストノードをHTML要素に変更する方法のようなので私の回答がまさにそれです

Kuriii

2020/10/30 08:56

ありがとうございます。処理後のHTMLを追加しました。

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

回答2件

親子については私の誤解かもしれません。
単にテキストノードをHTML要素に変更すればよいだけですかね？

codepen text node change

投稿2020/10/30 08:09

yambejp

総合スコア114812

Kuriii

2020/10/30 08:53

はい、やりたいことはご指摘の内容で合っています。できればなのですが、「○○という文言を○○というHTMLに置き換える」というのをできるだけ共通コンポーネントとして実装したいのですが、例えば関数を呼び出すときにxxx("ダミーテキスト","渡すHTML")みたいな書き方で実装することは可能でしょうか。よろしくお願いいたします。

yambejp

2020/10/30 08:56 編集

”渡すHTML”が引数として渡すの困難だと思いますけど大丈夫ですか？私の例だと、HTML要素に変更していますが、あくまでクローンを使って量産しています

Kuriii

2020/10/30 08:59

何かツール等を使って、エスケープ処理をしたら渡せないかな…とふわっと思っているのですが、どういう点が困難かご教示いただくことは可能でしょうか？

yambejp

2020/10/30 09:01

渡すHTML＝DOMだからです文字列として渡そうとしていますか？

Kuriii

2020/10/30 10:32

すみません、DOMだからなぜ困難なのかがよく割っていないのですが…。 <a href="#" class="nav-link">お問い合わせ</a>に差し替えたい場合、 xxx("サンプルはこちら","<a href="#" class="nav-link">お問い合わせ</a>") のような形でエスケープして渡すことを考えていました。あるいは、引数をシングルクォートで囲めばよいのでしょうか…。 xxx('サンプルはこちら','<a href="#" class="nav-link">お問い合わせ</a>')

yambejp

2020/10/30 10:45 編集

関数にしてボタンクリックで実行するよう codepen更新しました

Kuriii

2020/10/30 12:23

ありがとうございます。一旦、こちらでコードを組み込ませていただきます。今はクリックにしていただいていますが、実際はロードが読み込み終わったら実行という形になります。すみません、お手数でなければ、簡単に解説いただいてもよろしいでしょうか。私がまだ不勉強で、ES6のコードをうまく理解できておりません…。

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