jqueryを使用してdiv内のテキストのみを置き換える

私は次のようなdivを持っています：

<div id="one">
       <div class="first"></div>
       "Hi I am text"
       <div class="second"></div>
       <div class="third"></div>
</div>

jqueryを使用して、テキストのみを「Hi I am text」から「Hi I am replace」に変更しようとしています。これは簡単かもしれませんが、私にはできません。

使用する$('#one').text('')と、#Onediv 全体が空になります。

テキストはそれだけではいけません。span要素に入れます。

これを次のように変更します。

<div id="one">
       <div class="first"></div>
       <span>"Hi I am text"</span>
       <div class="second"></div>
       <div class="third"></div>
</div>

$('#one span').text('Hi I am replace');

テキストノード（nodeType==3）を見つけて、次のものを置き換えますtextContent。

$('#one').contents().filter(function() {
    return this.nodeType == 3
}).each(function(){
    this.textContent = this.textContent.replace('Hi I am text','Hi I am replace');
});

ライブの例：http : //jsfiddle.net/VgFwS/

テキストを空の文字列以外のものに設定する必要があります。さらに、.html（）関数は、divのHTML構造を維持しながらそれを行う必要があります。

$('#one').html($('#one').html().replace('text','replace'));

置き換えるテキストを実際に知っている場合は、

$('#one').contents(':contains("Hi I am text")')[0].nodeValue = '"Hi I am replace"';

http://jsfiddle.net/5rWwh/

または

$('#one').contents(':not(*)')[1].nodeValue = '"Hi I am replace"';

$('#one').contents(':not(*)') この場合、非要素の子ノードを選択し、テキストノードを選択します。2番目のノードは、置き換えるノードです。

http://jsfiddle.net/5rWwh/1/

別のアプローチは、その要素を保持し、テキストを変更してから、その要素を追加して戻すことです

const star_icon = $(li).find('.stars svg')
$(li).find('.stars').text(repo.stargazers_count).append(star_icon)

HTMLを変更できない場合に備えて。非常に原始的ですが、短くて機能します。（親divが空になるため、子divは削除されます）

$('#one').text('Hi I am replace');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="one">
  <div class="first"></div>
  "Hi I am text"
  <div class="second"></div>
  <div class="third"></div>
</div>