Best IT Recipes

JQuery modifies inner text but retains html

I would like to change the text of the HTML element, but save the rest of the internal html using jQuery.

For example:

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

replace "Some text" with "Other text", and the result should look like this:

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

EDIT: My current solution is as follows:

 var aElem = $('a'); var children = aElem.children(); aElem.text("NEW TEXT"); aElem.append(children);

But there must be an even more elegant way to do this.

+47
jquery
Mar 08 2018-11-11T00:
source share
12 answers

Everything seems to be working fine.

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>
+27
Mar 08 2018-11-11T00:
source share

Since you cannot change the link, you just need to use replace

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

Jsfiddle example.

+28
Mar 08 2018-11-11T00:
source share

Wrap the text you want to change between

 <a href="link.html"><span>Some text</span> <img src="image.jpg" /></a> $('a span').html( 'new text' );
+13
Mar 08 2018-11-11T00:
source share

My solution, although a little late.

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

Some notes:

  • contents() contains text nodes, unlike children() .
  • You must create a copy of the contents using var contents = ... , otherwise the remaining elements will be lost forever after replacing with $(this).html('NEW TEXT') .
  • Checking length optional, but recommended.
  • nodeType validation nodeType optional but recommended.
+9
May 7 '12 at 7:02 a.m.
source share

An alternative way would be to use the contents() method as follows:

Considering

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

you can replace 'Some text' with jQuery

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

JsFiddle example here .

The idea of contents() was inspired by this question, which was answered by user charlietfl.

+6
Dec 05 '14 at 10:03
source share

An efficient and reliable way that does not require you to know what internal elements are or what text is:

 var $a = $('a'); var inner = ''; $a.children.html().each(function() { inner = inner + this.outerHTML; }); $a.html('New text' + inner);
+2
Jun 15 '16 at 7:28
source share

try this code

 $('a').live('click', function(){ var $img = $(this).find('img'); $(this).text('changed'); $(this).append($img); });
+1
Mar 08 2018-11-11T00:
source share

You need to add a <span> element and change the text of this element, for example:

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

Then you can call from jQuery:

 $("#foo").html("Other text");

And your result will be effective:

 <a href="link.html"><span id="foo">Other text</span><img src="image.jpg" /></a>
0
Mar 08 2018-11-11T00:
source share

This is an improvement I made to the jquery.uniform library. In particular, the function $.uniform.update() . I accepted the idea from acheong87 and changed it a bit.

The idea is to change the text in the range, but retain the internal HTML bindings and events. There is no need to store and add HTML in this way.

 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(); } }
0
Oct 28 '12 at 7:00
source share

I added a jQuery function for this need.

you may need to convert the html objects to a text view, so I added the decodeEntities function.

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

Example using $('selector').textOnly('some text')

0
Jun 07 '17 at 11:59 on
source share

My general version is:

 let button = $('#yourElement'); button.html(button.html().replace(button[0].innerText, "New Text"));
0
Nov 23 '17 at 13:07 on
source share

You can change it to .contents ()

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

where in your case "[0] .data" is your text data

0
Dec 07 '17 at 1:50
source share


More articles:


All Articles