Изменение jQuery внутренний текст, но сохраняет HTML

Я хотел бы изменить текст элемента HTML, но сохранить остальную часть внутреннего HTML с jQuery.

Например:

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

Но должен быть некоторый более изящный способ сделать это.

62
задан 8 March 2011 в 16:14

7 ответов

просто используйте некоторую плоскость js функциональность:

$ [0] .firstChild.nodeValue = "Новый текст";

1
ответ дан 31 October 2019 в 13:59

Можно изменить его .contents ()

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

, где в случае" [0] .data" является текстовыми данными

7
ответ дан 31 October 2019 в 13:59

Я добавил функцию 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')

0
ответ дан 31 October 2019 в 13:59

Моя универсальная версия:

let button = $('#yourElement');
button.html(button.html().replace(button[0].innerText, "New Text"));
0
ответ дан 31 October 2019 в 13:59

Сокращение от большего количества элементов и начального текста для изменения:

elemshtml = '';
$("a *").each(function(){elemshtml +=$(this)[0].outerHTML});
$("a").html('Some text' + elemshtml);
0
ответ дан 31 October 2019 в 13:59

Эффективный и устойчивый путь, который не требует, чтобы Вы знали то, что внутренние элементы или каков текст:

var $a = $('a');
var inner = '';
$a.children.html().each(function() {
    inner = inner + this.outerHTML;
});
$a.html('New text' + inner);
1
ответ дан 31 October 2019 в 13:59

Альтернативный путь состоял бы в том, чтобы использовать contents() метод следующим образом:

, Учитывая

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

можно заменить 'Some text' примером jQuery

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

jsFiddle здесь .

идея contents() была вдохновлена этот вопрос, отвеченный пользователем charlietfl.

10
ответ дан 31 October 2019 в 13:59

Другие вопросы по тегам:

Похожие вопросы: