Replace only text inside a div using jquery

小开

最佳答案

文本不应该单独存在。将其放入 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');

小开

您需要将文本设置为除空字符串之外的其他值。此外,。HTML ()函数应该在保留 div 的 HTML 结构的同时执行此操作。

$('#one').html($('#one').html().replace('text','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');
});

注意，根据医生，你可以用 Node.TEXT_NODE代替上面硬编码的 3，这样就更清楚了。

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

小开

如果您确实知道要替换的文本，您可以使用

$('#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(*)') selects non-element child nodes in this case text nodes and the second node is the one we want to replace.

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>

小开

我有同样的问题，但是 文本是父元素中的第一个节点。在这种情况下，你可以这样做，它真的很快:

// 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))

小开

当您用 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>