javascript - nodeValue をラップする

Question

このコードでテキストをラップしようとしています

<div class="div">
    <span></span>
    <a></a>
    *text I want to wrap*
    <span></span>
</div>

テキストが何であるかは知っていますが、div での彼の位置はわかりません

$(".div:contains('*text*')")

そのような正しいdivを取得しますが、テキストをラップする方法がわかりません

Answer 1

すべてのテキストをラップしたいという前提で (もちろん、私は間違っているかもしれません)、次のことをお勧めします。

$('.div').contents().each(
    function(){
        if (this.nodeType == 3) {
            $(this).wrap($('<a />', {'href':'#'}));
        }
    });​

JS フィドルのデモ。

特定のテキストのみを折り返す場合:

$('.div').contents().each(
    function(){
        if (this.nodeType == 3 && this.nodeValue.trim() == "*text I want to wrap*" ) {
            $(this).wrap($('<a />', {'href':'#'}));
        }
    });​

JS フィドルのデモ。

HTML を文字列として扱う単純なアプローチを好むことを考えると、あなたが受け入れたものよりも単純な回答を投稿すると思いました。

$('.div').html(
    function(i,h){
        return h.replace('*text I want to wrap*','<b>$&</b>');
    });​

JS フィドルのデモ。

Answer 2

最も簡単な方法は、親要素のhtmlを取得し、文字列を新しい文字列に置き換えることです

newHtml = $(".div").html().replace("*text I want to wrap*","<b>new html</b>");

新しいHtmlを親divに戻します

 $(".div").html(newHtml);

フィドルの例