JQuery 更改内部文本，但保留 html

我希望更改 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);

但一定有更优雅的方法。

101300 次浏览
小开

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

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


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

您需要添加一个 <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>
小开

因为您不能修改链接，所以一个选项就是简单地使用 replace

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

Jsfiddle的例子。

小开
最佳答案

这个看起来没问题。

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

试试这个代码

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

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

$('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. 与 children()不同，contents()包含文本节点。
  2. 有必要通过 var contents = ...创建内容的 收到，否则剩余的元素一旦被 $(this).html('NEW TEXT')替换就会永远丢失。
  3. length检查是可选的，但建议使用。
  4. nodeType检查是可选的，但建议使用。
小开

这是我对 jquery.univerlibrary 所做的一个改进。 特别是 $.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();
}
}
小开

另一种办法是采用以下 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");

例子 给你。

contents()的想法是受到 这个问题的启发，由用户 charlietfl 回答。

小开

一种高效而健壮的方法，它不需要你知道内部元素是什么或者文本是什么:

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

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

小开

我的通用版本:

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

可以通过. content ()对其进行更改

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

在您的示例中，“[0] . data”在哪里是文本数据

小开

更多要素和导致修改的案文的简写:

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

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

$(‘ a’)[0] . firstChild.nodeValue = “ New Text”;


提交答案