How to change text except its span

Question

How can we change the text data from except span text?

<h2 id="nameUser" >Muhammed <span> mobile :989 531 9991</span></h2>

Is there any solution to change h2 except span?

Check this: http://stackoverflow.com/questions/298750/how-do-i-select-text-nodes-with-jquery — techfoobar, Nov 07 '12 at 14:22
@JayBlanchard `not()` won't work in this situation. http://jsbin.com/ayedub/2/edit — Anthony Hatzopoulos, Nov 07 '12 at 14:23

David Hellsing · Answer 1 · 2012-11-07T14:30:38.643

4

.contents() returns a collection of nodes, including text nodes. So in your case this would work:

$('#nameUser').contents()[0].nodeValue = 'Another name';

If you want to get every node except the SPAN, try:

$('#nameUser').contents().filter(function() {
    return this.nodeName != 'SPAN';
}).each(function(i) {
    // modify each text node
    this.nodeValue = 'name '+i;
});

DEMO: http://jsfiddle.net/Vks82/

edited Nov 07 '12 at 14:30

answered Nov 07 '12 at 14:24

David Hellsing

106,495
44
176
212

This one is good because it will retain the order of things inside the h2 tag if there are span children before and after the text to be modified. Where as most of the other examples do not. http://jsbin.com/ayedub/4/edit – Anthony Hatzopoulos Nov 07 '12 at 14:34

score 2 · Answer 2 · answered Nov 07 '12 at 14:21

2

Search for the first textnode in childNodes of the h2 element. Change the value of the textnode.

var element = document.getElementById('nameUser');
element.childNodes[0].nodeValue = 'New String';

..should work. Only for this example, because the first childnode is the textnode you want, you don't have to search for it. Otherwise you do..

answered Nov 07 '12 at 14:21

Jochem Kuijpers

1,770
3
17
34

@maanu I wasn't aware of this issue, but IE counts childNodes differently from other browsers (firefox). Does this help you? http://www.webdeveloper.com/forum/showthread.php?156010-childNodes-in-Firefox-vs-IE&s=d295e3e1c2ff528c94360787920ae41e&p=782524#post782524 , alternatively you might want to use gdoron's method, if it suits you better and you're fine with using jQuery for this particular problem. – Jochem Kuijpers Nov 08 '12 at 14:48

score 1 · Answer 3 · answered Nov 07 '12 at 14:19

1

$('#nameUser').contents().each(function() {
    if (this.nodeType == 3) 
        this.data = "The text you want here";
});

Live DEMO

answered Nov 07 '12 at 14:19

gdoron

147,333
58
291
367

nice usage of [nodeType](https://developer.mozilla.org/en-US/docs/DOM/Node.nodeType?redirectlocale=en-US&redirectslug=nodeType) – Anthony Hatzopoulos Nov 07 '12 at 14:41

score 1 · Accepted Answer · answered Nov 07 '12 at 14:23

1

This example may help you to change father element without changing child elements:

var content= $('#nameUser').children();
$('#nameUser').text('Altered Text').append(content);

answered Nov 07 '12 at 14:23

halilb

4,055
1
23
31

3

Note that this will also remove event handlers for elements inside the node. – David Hellsing Nov 07 '12 at 14:29

Jeff Beck · Answer 5 · 2012-11-07T14:37:05.463

1

You can do it by saving the children first here is a codepen of it working.

http://codepen.io/beckje01/pen/sGLot

var h2 = $('#nameUser');
var elmsToSave = h2.children();

h2.empty();
h2.text('bob');
h2.append(elmsToSave);

As pointed out in the comments this will only work if the text to change is first.

edited Nov 07 '12 at 14:37

answered Nov 07 '12 at 14:30

Jeff Beck

3,944
3
28
45

Bruno Vieira · Answer 6 · 2012-11-07T14:47:31.507

0

This will work not only for span but also for any other element which you want the text without the text of it's children.

$("#nameUser")
    .clone()   
    .children()
    .remove()  
    .end()  
    .text();

For change the text I've create a simple jQuery function:

replaceTextWith = function($element, $replacement){
    $oldText = $element.clone().children().remove().end().text();
    $element.text($element.text().replace($oldText, $replacement));
}

replaceTextWith($("#nameUser"), "Bruno"); //usage

Here's a live example working on fiddle

edited Nov 07 '12 at 14:47

answered Nov 07 '12 at 14:21

Bruno Vieira

3,884
1
23
35

Are you sure it will work?! can you give us a live example at http://jsfiddle.net – gdoron Nov 07 '12 at 14:24
Yes I'm sure, I'll fiddle it – Bruno Vieira Nov 07 '12 at 14:25
2

That looks like it will return the text without the span, but the OP wanted to modify it. – Blazemonger Nov 07 '12 at 14:26
Oh man! I really thought he want just to get the text. I'll edit it. It's possible – Bruno Vieira Nov 07 '12 at 14:27
Now it works as it should! Sorry for not reading it right in the first time – Bruno Vieira Nov 07 '12 at 14:47
This will also remove the SPAN element (or any other HTML). – David Hellsing Nov 07 '12 at 15:35
Actually this won't remove anything since it's working with a clone of the object. But yes, this works for any other element which is a child of the $element object. – Bruno Vieira Nov 07 '12 at 15:44

score 0 · Answer 7 · edited Nov 07 '12 at 14:50

0

try this ...

<h2 id="nameUser" >Muhammed <span id="nameUserSpan"> mobile :989 531 9991</span></h2>

<script>
$(document).ready(function() {
    var inspan= $("#nameUserSpan").html();
    var newuser='New User';
    $("#nameUser").html('');
    $("#nameUser").html(newuser + '<span id="nameUserSpan">' + inspan + '</span>');
});
</script>

edited Nov 07 '12 at 14:50

edparry

688
1
10
34

answered Nov 07 '12 at 14:29

Dario

417
4
17

How to change text except its span

7 Answers7