jQuery更改内部文本但保留htm

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

例如:

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

将“某些文本”替换为“其他文本”,结果应类似于:

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

但是必须有一些更优雅的方法。

Drejc asked 2019-10-09T00:40:33Z
14个解决方案
32 votes

这似乎工作正常。

现场演示

<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>
Brandon Boone answered 2019-10-09T00:40:45Z
30 votes

由于您无法修改链接,因此可以选择使用replace

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

jsfiddle上的示例。

Mark Coleman answered 2019-10-09T00:41:10Z
18 votes

将您要更改的文本换行

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

$('a span').html( 'new text' );
meouw answered 2019-10-09T00:41:34Z
11 votes

我的解决方案,尽管有点晚。

$('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));
        }
    }
});

一些说明:

  1. nodeType包含文本节点,与$(this).html('NEW TEXT')不同。
  2. 必须通过nodeType创建内容的副本,否则一旦替换为$(this).html('NEW TEXT'),其余元素将永远丢失。
  3. nodeType检查是可选的,但建议使用。
  4. nodeType检查是可选的,但建议使用。
Andrew Cheong answered 2019-10-09T00:42:22Z
7 votes

一种替代方法是使用contents()方法,如下所示:

特定

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

您可以用jQuery替换contents()

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

jsFiddle示例在这里。

contents()的想法是受此问题启发的,并得到用户charlietfl的回答。

jim_kastrin answered 2019-10-09T00:43:08Z
3 votes

您可以通过.contents()进行更改

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

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

Darryl Ceguerra answered 2019-10-09T00:43:39Z
1 votes

试试这个代码

$('a').live('click', function(){
    var $img = $(this).find('img'); 
    $(this).text('changed');
    $(this).append($img);
});
diEcho answered 2019-10-09T00:43:59Z
1 votes

一种高效而强大的方法,不需要您知道内部元素是什么或文本是什么:

var $a = $('a');
var inner = '';
$a.children.html().each(function() {
    inner = inner + this.outerHTML;
});
$a.html('New text' + inner);
anthonygore answered 2019-10-09T00:44:24Z
0 votes

您需要添加<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>
Brian Driscoll answered 2019-10-09T00:45:02Z
0 votes

这是我对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();
    }
}
Tim Vermaelen answered 2019-10-09T00:45:34Z
0 votes

我为此添加了一个jQuery函数。

您可能需要将html-entities转换为文本表示形式,所以我添加了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')

Yechezkel Deren answered 2019-10-09T00:46:12Z
0 votes

我的通用版本:

let button = $('#yourElement');
button.html(button.html().replace(button[0].innerText, "New Text"));
oceanBT answered 2019-10-09T00:46:38Z
0 votes

更改更多元素和前导文字的速记:

elemshtml = '';
$("a *").each(function(){elemshtml +=$(this)[0].outerHTML});
$("a").html('Some text' + elemshtml);
user3270784 answered 2019-10-09T00:47:03Z
0 votes

只需使用一些简单的js功能:

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

Drea58 answered 2019-10-09T00:47:35Z
translate from https://stackoverflow.com:/questions/5232862/jquery-change-inner-text-but-preserve-html