121

我有一个像这样的 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。

4

8 回答 8

144

找到文本节点 ( 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>

于 2012-08-08T15:04:35.133 回答
144

文本不应单独存在。将其放入一个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');
于 2012-08-08T14:56:37.387 回答
18

您需要将文本设置为空字符串以外的内容。此外， .html() 函数应该在保留 div 的 HTML 结构的同时做到这一点。

$('#one').html($('#one').html().replace('text','replace'));
于 2012-08-08T14:57:13.903 回答
11

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

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

http://jsfiddle.net/5rWhh/

或者

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

$('#one').contents(':not(*)')在这种情况下选择非元素子节点文本节点，第二个节点是我们要替换的那个。

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

于 2012-08-08T15:08:47.170 回答
0

另一种方法是保留该元素，更改文本，然后将该元素附加回来

const star_icon = $(li).find('.stars svg')
$(li).find('.stars').text(repo.stargazers_count).append(star_icon)
于 2016-05-22T08:06:38.757 回答
0

我有同样的问题，但文本是父元素内的第一个节点。在这种情况下，您可以执行以下操作，而且速度非常快：

// 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))
于 2021-06-21T16:50:57.360 回答
0

以防万一您无法更改 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>

于 2018-05-15T03:03:11.887 回答
-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>

于 2021-06-21T17:13:26.170 回答