Ganti hanya teks di dalam div menggunakan jquery

104

Saya memiliki div seperti:

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

Saya mencoba mengubah hanya teks dari "Hai, saya teks" menjadi "Hai, saya mengganti" menggunakan jquery. Ini mungkin mudah tetapi saya tidak dapat melakukannya.

Menggunakan $('#one').text('')hanya mengosongkan seluruh #Onediv.

javascript jquery

— manojadams
sumber

Mungkin berguna untuk membuat biola

— Inkbug

Gunakan $ ('# one'). Find ('. First'). Text ('Hi I am replace'); daripada $ ('# one'). text (); atau Anda dapat langsung mengakses elemen dan mengganti teks dengan menggunakan $ ('. first'). text ('Hi I am replace');

— Kartik Chauhan

134

Teks tidak boleh berdiri sendiri. Masukkan ke dalam spanelemen.

Ubah menjadi ini:

<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');

— Brian Ustas
sumber

51

Ini tidak menjawab pertanyaan OP, yang tidak mengatakan bahwa mereka memiliki kendali atas HTML.

— tar

1

ini berhasil tetapi bagaimana yakin untuk dieksekusi atau tidak? dapatkah saya menjalankan pengecualian jika kosong atau tag diubah? dalam pengikatan tidak berhasil karena div ini dibuat oleh code. dari REST atau database

— saber tabatabaee yazdi

122

Temukan node teks ( nodeType==3) dan ganti textContent:

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

Contoh langsung: http://jsfiddle.net/VgFwS/

— Jamiec
sumber

6

Jawaban yang sangat bagus!

— wcolbert

6

Ini harus menjadi jawaban yang diterima karena ini tidak mengharuskan Anda untuk mengubah html!

— Wouter Rutgers

2

@Jamiec FWIW Saya suka jawaban ini karena memungkinkan penggantian tanpa khawatir akan mengganggu markup / skrip, dll.

— lihat

3

Ini bekerja dengan sempurna untuk saya. Terkadang kami bekerja dalam situasi yang tidak mengizinkan perubahan HTML (yaitu SharePoint). Terima kasih

— Mark P.

14

Anda perlu mengatur teks ke sesuatu selain string kosong. Selain itu, fungsi .html () harus melakukannya sambil mempertahankan struktur HTML dari div.

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

— gcochard.dll
sumber

Meskipun ini akan berhasil dalam kasus ini, saya tidak suka opsi ini karena jika Anda mengganti kata "pertama" dengan kata "kedua" atau hanya 'saya' dengan '' itu akan mengacaukan tag Anda

— JSON

10

Jika Anda benar-benar tahu teks yang akan Anda ganti, Anda dapat menggunakan

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

http://jsfiddle.net/5rWwh/

Atau

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

$('#one').contents(':not(*)') memilih node anak non-elemen dalam hal ini node teks dan node kedua adalah yang ingin kita ganti.

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

— Musa
sumber

2

Dari tidak jQuery 1.8.3 $('#one').contents(':not(*)')akan memilih apa pun.

— BruceHill

0

Pendekatan lain adalah mempertahankan elemen itu, mengubah teks, lalu menambahkan elemen itu kembali

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

— onmyway133
sumber

0

Untuk berjaga-jaga jika Anda tidak dapat mengubah HTML. Sangat primitif tapi pendek & ampuh. (Ini akan mengosongkan div induk sehingga div anak akan dihapus)

$('#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>

Luaskan cuplikan

— ReturnTable
sumber

1

Ini menghapus semua div turunan #one

— Scot Nery

1

@ScotNery terima kasih, saya sudah update jawabannya. (Meskipun secara teknis menjawab pertanyaan khusus ini) Saya berasumsi selain membungkus teks dengan tag yang memiliki id, itu akan cukup menantang. Hanya hal lainnya adalah mencocokkan string yang akan diganti, tetapi itu sangat rapuh.

— ReturnTable