JQuery изменяет внутренний текст, но сохраняет html

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

Например:

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

EDIT: Мое текущее решение следующее:

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

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

Но должен быть еще более элегантный способ сделать это.

Ответы

Ответ 1

Кажется, все работает отлично.

Живая демонстрация

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

Ответ 2

Поскольку вы не можете изменить ссылку, вам нужно просто использовать replace

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

Пример jsfiddle.

Ответ 3

Оберните текст, который хотите изменить в промежутке

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

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

Ответ 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 необязательна, но рекомендуется.

Ответ 5

Альтернативным способом было бы использовать метод 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.

Ответ 6

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

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

Ответ 7

попробуйте этот код

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

Ответ 8

Вам нужно добавить элемент <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>

Ответ 9

Это улучшение, которое я внес в библиотеку 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();
    }
}

Ответ 10

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

Ответ 11

Моя общая версия:

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

Ответ 12

Вы можете изменить его на .contents()

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

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