JQuery更改内部文本，但保留HTML
我想改变一个HTML元素的文本，但用jQuery保留内部html的其余部分。
例如：
<a href="link.html">Some text <img src="image.jpg" /></a> 用“Other text”replace“Some text”，结果应该如下所示：
<a href="link.html">Other text <img src="image.jpg" /></a>
编辑：我目前的解决scheme如下：
var aElem = $('a'); var children = aElem.children(); aElem.text("NEW TEXT"); aElem.append(children);
但是必须有一些更优雅的方式来做到这一点。
这似乎工作得很好。
现场演示
<html> <head> </head> <body> <a href="link.html">Some text <img src="img.jpg" /></a> </body> </html> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script> <script type="text/javascript"> $(function(){ var $link = $('a'); var $img = $link.find('img'); $link.html('New Text'); $link.append($img); }); </script>
既然你不能修改链接，一个选项将是简单地使用replace
$("a").html($("a").html().replace("Some text", "Other text"));
在jsfiddle的例子 。
将要更改的文本包裹在一个范围内
<a href="link.html"><span>Some text</span> <img src="image.jpg" /></a> $('a span').html( 'new text' );
我的解决办法，虽然有点晚了。
$('a').each(function() { var contents = $(this).contents(); if (contents.length > 0) { if (contents.get(0).nodeType == Node.TEXT_NODE) { $(this).html('NEW TEXT').append(contents.slice(1)); } } });
一些说明：
-
contents()包含文本节点，不像children()。 - 有必要通过
var contents = ...创build一个内容的副本 ，否则其余的元素一旦被$(this).html('NEW TEXT')取代就会永远丢失。 -
length检查是可选的，但build议。 -
nodeType检查是可选的，但推荐使用。
另一种方法是使用contents()方法，如下所示：
特定
<a href="link.html">Some text <img src="image.jpg" /></a>
你可以用jQuery来replace'Some text'
var text = $('a').contents().first()[0].textContent; $('a').contents().first()[0].textContent = text.replace("Some text", "Other text");
jsFiddle 这里的例子。
contents()的思想受到这个问题的启发，由用户charlietfl回答。
一种高效而健壮的方式，不需要您知道内部元素是什么或文本是什么：
var $a = $('a'); var inner = ''; $a.children.html().each(function() { inner = inner + this.outerHTML; }); $a.html('New text' + inner);
试试这个代码
$('a').live('click', function(){ var $img = $(this).find('img'); $(this).text('changed'); $(this).append($img); });
您需要添加<span>元素并更改该元素的文本，例如：
<a href="link.html"><span id="foo">Some text</span><img src="image.jpg" /></a>
然后，你可以从jQuery调用：
$("#foo").html("Other text");
而你的结果将是有效的：
<a href="link.html"><span id="foo">Other text</span><img src="image.jpg" /></a>
这是我对jquery.uniform库的改进。 特别是$.uniform.update()函数。 我从acheong87那里得到了这个想法，并改变了一下。
这个想法是改变跨度的文本，但保留内部的HTML和事件绑定。 不需要以这种方式存储和附加HTML。
if ($e.is("input[type=button]")) { spanTag = $e.closest("span"); var contents = spanTag.contents(); if (contents.length) { var text = contents.get(0); // Modern browsers support Node.TEXT_NODE, IE7 only supports 3 if (text.nodeType == 3) text.nodeValue = $e.val(); } }
我为这个需要添加了一个jQuery函数。
您可能需要将html实体转换为文本表示，所以我添加了decodeEntities函数。
function decodeEntities(encodedString) { if (typeof encodedString != "string") return encodedString; if (!encodedString) return ""; var textArea = document.createElement('textarea'); textArea.innerHTML = encodedString; return textArea.value; } jQuery.fn.textOnly = function(n) { if (this.length > 0) $(this).html(decodeEntities($(this).html()).replace($(this).text(), n)); return $(this); }
用法示例$('selector').textOnly('some text')
