Question

我想更改HTML元素的文本，但使用jQuery保留内部html的其余部分。

例如：

<a href="link.html">Some text <img src="image.jpg" /></a>

将“Some text”替换为“Other text”，结果应如下所示：

<a href="link.html">Other text <img src="image.jpg" /></a>

修改：我目前的解决方案如下：

var aElem = $('a');
var children = aElem.children();

aElem.text("NEW TEXT");
aElem.append(children);

但必须有更优雅的方式来做到这一点。

Answer 1

这似乎工作得很好。

的 Live Demo

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

Answer 2

由于您无法修改链接，因此只需使用replace

即可

$("a").html($("a").html().replace("Some text", "Other text"));

jsfiddle上的示例。

Answer 3

在跨度中包装您想要更改的文本

<a href="link.html"><span>Some text</span> <img src="image.jpg" /></a> 

$('a span').html( 'new text' );

Answer 4

我的解决方案，虽然有点晚。

$('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 = ...创建内容的副本，否则其余元素会被$(this).html('NEW TEXT')替换后永久丢失。
length检查是可选的，但建议使用。
nodeType检查是可选的，但建议使用。

Answer 5

另一种方法是使用contents()方法，如下所示：

鉴于

<a href="link.html">Some text <img src="image.jpg" /></a>

你可以用jQuery替换'Some text'

var text = $('a').contents().first()[0].textContent;
$('a').contents().first()[0].textContent = text.replace("Some text", "Other text");

jsFiddle示例here。

contents()的想法受到this问题的启发，用户charlietfl回答。

Answer 6

您可以通过.contents（）

进行更改

$('.yourElement').contents()[0].data = 'New Data';

在您的情况下，“[0] .data”是您的文本数据

Answer 7

试试这段代码

$('a').live('click', function(){
    var $img = $(this).find('img'); 
    $(this).text('changed');
    $(this).append($img);
});

Answer 8

一种高效且稳健的方式，不需要您知道内部元素是什么或文本是什么：

var $a = $('a');
var inner = '';
$a.children.html().each(function() {
    inner = inner + this.outerHTML;
});
$a.html('New text' + inner);

Answer 9

您需要添加<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>

Answer 10

这是我对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();
    }
}

Answer 11

我为此需要添加了一个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')

Answer 12

我的通用版本：

let button = $('#yourElement');
button.html(button.html().replace(button[0].innerText, "New Text"));

Answer 13

更多元素的简写和要更改的主要文字：

elemshtml = '';
$("a *").each(function(){elemshtml +=$(this)[0].outerHTML});
$("a").html('Some text' + elemshtml);

Answer 14

只使用一些普通的js功能：

$（'a'）[0] .firstChild.nodeValue =“新文本”;

JQuery更改内部文本但保留html

14 个答案: