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

Question

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

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

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

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

Answer 1

テキストはそれ自体であってはなりません。それを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');

Answer 2

テキストノード（）を見つけて、 ：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');
});

ドキュメントに従って、3上記のハードコードされたNode.TEXT_NODEものを、実行していることをはるかに明確に置き換えることができることに注意してください。

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.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>

Answer 3

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

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

Answer 4

置き換えるテキストを実際に知っている場合は、次を使用できます

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

Answer 5

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

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

Answer 6

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>

Answer 7

同じ問題が発生しましたが、テキストは親要素内の最初のノードでした。この場合、あなたはこのようなことをすることができます、そしてそれは本当に速いです：

// find the children elements
 termsChildren = $('#one').children()

// replace the text, then re-append the children element.
 $('#one').text(' "Hi I am replace" ').append(termsChildren)

それ以外の場合は、テキストの前に移動する必要のある子と、テキストの後に移動する必要のある子を指定する必要があります。

// find the children elements
 termsChildren = $('#one').children()

// remove all the content
 $('#one').text(' ')
// append the first child element
 $('#one').append(termsChildren[0])
// add the new text and then the other children
 $('#one').text(' "Hi I am replace" ').append(termsChildren.slice(1))

Answer 8

要素のプレーンテキストをjQueryに置き換える場合、プレーンテキストを単独で配置することはできません。そうしないと、要素全体がクリアまたは置換されます。すべてのプレーンテキストを<span>要素内に配置する必要があります。

$(document).ready(function() {
  $("#change-btn").click(function() {
    $("#one").children("span").text("Hi I am replace");
  });
});

<!-- Import CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<!-- Import JavaScript -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.bundle.min.js" integrity="sha384-gtEjrD/SeCtmISkJkNUaaKMoLD0//ElJ19smozuHV6z3Iehds+3Ulb9Bn9Plx0x4" crossorigin="anonymous"></script>

<div class="m-2">
  <div id="one">
    <div class="first"></div>
    <span>Hi I am text</span>
    <div class="second"></div>
    <div class="third"></div>
  </div>
  <button type="button" class="btn btn-primary btn-sm mt-2" id="change-btn">Click to change text</button>
</div>