Zastąp tylko tekst wewnątrz elementu div za pomocą jquery

106

Mam div jak:

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

Próbuję zmienić tylko tekst z „Cześć, jestem tekstem” na „Cześć, zastępuję” za pomocą jquery. To może być łatwe, ale nie jestem w stanie tego zrobić.

Użycie $('#one').text('')po prostu opróżnia cały #Onediv.

javascript jquery

— manojadams
źródło

— Przydałoby

Użyj $ ('# one'). Find ('. First'). Text ('Hi I am replace'); zamiast $ ('# one'). text (); lub możesz uzyskać bezpośredni dostęp do elementu i zamienić tekst za pomocą $ ('. first'). text ('Cześć, jestem zamieniany');

— Kartik Chauhan

136

Tekst nie powinien być sam. Umieść to w spanelemencie.

Zmień to na:

<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
źródło

51

To nie odpowiada na pytanie OP, który nie powiedział, że ma kontrolę nad HTML.

— tar

1

to działa, ale jak można upewnić się, że zostanie wykonane, czy nie? czy mogę uruchomić wyjątek, jeśli jest pusty lub zmieniony tag? w nieudanych wiązaniach, ponieważ ten div został utworzony przez kod. z REST lub bazy danych

— saber tabatabaee yazdi

122

Znajdź węzły tekstowe ( nodeType==3) i zamień textContent:

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

Przykład na żywo: http://jsfiddle.net/VgFwS/

— Jamiec
źródło

6

Naprawdę świetna odpowiedź!

— wcolbert

7

Powinna to być akceptowana odpowiedź, ponieważ nie wymaga to zmiany kodu HTML!

— Wouter Rutgers

2

@Jamiec FWIW Kocham tę odpowiedź, ponieważ pozwala zamienniki bez martwienia się o borking znaczników / skrypty itp

— sehe

3

To zadziałało idealnie dla mnie. Czasami pracujemy w sytuacjach, które nie pozwalają na zmianę kodu HTML (np. SharePoint). Dzięki

— Mark P.

14

Musisz ustawić tekst na coś innego niż pusty ciąg. Ponadto funkcja .html () powinna to zrobić, zachowując strukturę HTML elementu div.

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

— gcochard
źródło

Chociaż to by zadziałało w tym przypadku, nie podoba mi się ta opcja, ponieważ jeśli zastąpisz słowo „pierwszy” słowem „drugi” lub po prostu „i” z „”, zepsułoby to twoje tagi

— JSON

10

Jeśli naprawdę znasz tekst, który zamierzasz zastąpić, możesz użyć

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

http://jsfiddle.net/5rWwh/

Lub

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

$('#one').contents(':not(*)') wybiera nieelementowe węzły potomne w tym przypadku węzły tekstowe, a drugi węzeł jest tym, który chcemy zastąpić.

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

— Musa
źródło

2

Od jQuery 1.8.3 $('#one').contents(':not(*)')nic nie wybierze.

— BruceHill

0

Innym podejściem jest zachowanie tego elementu, zmiana tekstu, a następnie dodanie tego elementu z powrotem

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

— onmyway133
źródło

0

Na wszelki wypadek, jeśli nie możesz zmienić HTML. Bardzo prymitywny, ale krótki i działa. (Spowoduje to opróżnienie nadrzędnego elementu DIV, dlatego podrzędny element DIV zostanie usunięty)

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

Rozwiń fragment

— ReturnTable
źródło

1

Spowoduje to usunięcie wszystkich podrzędnych elementów div z #one

— Scot Nery,

1

@ScotNery dziękuję, zaktualizowałem odpowiedź. (Chociaż technicznie odpowiada na to konkretne pytanie) Zakładam, że inne niż zawijanie tekstu tagiem z identyfikatorem byłoby dość trudne. Inną rzeczą jest dopasowanie ciągu do zastąpienia, ale jest naprawdę delikatny.

— Tabela zwrotów,