如何在html <label>元素之间选择文本

Question

给出以下html：

<label for="xxxx" id="Password_label">
   <div class="xxxx">Password 555</div>
   555
   <div class="xxx"></div>
</label>

我需要更换文字＆＃34; 555＆＃34;写在第一个div下面的label元素内。我正在尝试获取文本，但目前无法做到。

我试过了：

$("#Password_label").text()

但它返回空字符串。

Answer 1

在 contents() 和 eq() 的帮助下获取文字节点，然后使用 replaceWith()替换文字

$('#Password_label')
  .contents() // get all nodes including text node
  .eq(2) // get the text node 
  .replaceWith('newText') // replace with new content

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="xxxx" id="Password_label">
  <div class="xxxx">Password 555</div>
  555
  <div class="xxx"></div>
</label>

使用纯JavaScript使用 childNodes 来获取所有子节点并使用节点的 textContent 属性更新文本内容。

document.getElementById('Password_label') // get element by id
  .childNodes[2] // get all childnodes and get text node need to update
  .textContent = 'newText'; // update text content of that node

<label for="xxxx" id="Password_label">
  <div class="xxxx">Password 555</div>
  555
  <div class="xxx"></div>
</label>

更新：在这种情况下，您可以通过 filter() 方法避免出现空文字节点的问题

$('#Password_label')
  .contents() // get all nodes including text node
  .filter(function() { // filterout non-empty text nodes
    return this.nodeType === 3 && $.trim(this.textContent).length;
  })
  .replaceWith('newText') // replace with new content

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="xxxx" id="Password_label">
  <div class="xxxx">Password 555</div>
  555
  <div class="xxx"></div>
</label>