JQuery：如何替换嵌套标记后面的文字？

Question

我正在尝试找出将“apple”重命名为“orange”的jQuery语句：

我正在尝试找出将“apple”重命名为“orange”的jQuery语句：

<a id="alvin" href="http://www.camille.com"><ins class="xxx">Anna</ins>apple</a>

这个可以轻松完成吗？

- Pete Alvin

Answer 1

由于#不是有效的ID字符，我删除了ID中的#。

基于此，请尝试以下代码：

示例: http://jsfiddle.net/u49wy/

var $contents = $('#alvin').contents();

$contents[$contents.length - 1].nodeValue = 'orange';

.contents()方法返回元素的所有子节点，包括文本节点。

接下来，代码选择最后一个节点（一个文本节点），并更新其nodeValue，这就是如何更新文本节点的值。

• .contents() - http://api.jquery.com/contents

- user113716

Answer 2

帕特里克比我更快地解决了这个问题，但我的解决方案更加动态，因为它可以选择任何地方的文本，即使两侧有标签：

$('#alvin').contents().filter(function () {
    return this.nodeType == 3;
})[0].nodeValue = "orange";

它通过过滤内容，只保留文本节点，并将第一个 nodeValue 改为 "orange" 来实现此操作。

http://jsfiddle.net/ssRyB/

- Andy E

Answer 3

id="#alvin" 不是有效的语法，'#' 在 jQuery 或 CSS 中用作选择器的一部分。

对于这个非常有限的例子，将 "apple" 替换为 "orange"，我实际上只需读取 innerHTML 并重新编写它。我甚至没有使用 jQuery。

window.onload = function() {
    var alvin = document.getElementById('alvin')
    alvin.innerHTML = alvin.innerHTML.replace('apple', 'orange');
}

我没有使用jQuery，因为jQuery没有干净的方法来选择杂散的文本节点。那么如果我们将任何子文本节点包装在span中怎么样？我们可以这样做：

$('#alvin').contents().filter(function() {
  return this.nodeType == 3;
}).wrap('<span></span>').end();

以这种方式，我们留下了这个结构：

<a id="alvin" href="http://www.camille.com"><ins class="xxx">Anna</ins><span>apple</span></a>

然后我们可以使用+相邻选择器来获取它，就像这样--ins+span表示在<ins>之后的<span>：

var elem = $('#alvin ins+span');
elem.text(elem.text().replace('apple', 'orange'));

- artlung

Answer 4

另一种方式（虽然不太美观）：

$("#alvin").html($("#alvin").html().replace(/apple$/,'orange'));

编辑：感谢Patrick提醒，在apple末尾添加了$符号。

- Gert Grenander

---

实际上，使用关闭的 a 标签是行不通的，因为它不是 #alvin 内容的一部分。.html() 方法只会返回内部 HTML 内容，而不会返回选择器匹配的标签集的任何部分。不过，你可以使用输入结束指示符 $。 :) - user113716