แทนที่เฉพาะข้อความภายใน div โดยใช้ jquery

ฉันมี div เช่น:

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

ฉันพยายามเปลี่ยนเฉพาะข้อความจาก "สวัสดีฉันเป็นข้อความ" เป็น "สวัสดีฉันแทนที่" โดยใช้ jquery นี่อาจจะง่าย แต่ฉันไม่สามารถทำได้

การใช้$('#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 () ควรทำในขณะที่รักษาโครงสร้าง HTML ของ div

$('#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(*)') เลือกโหนดชายน์ที่ไม่ใช่องค์ประกอบในกรณีนี้โหนดข้อความและโหนดที่สองคือโหนดที่เราต้องการแทนที่

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>