How to safetly replace the value after the "td" tag? (In JQuery)

Question

Inside the "td" tag, how do I replace the "BMW" word after the "span" tag without removing the whole "span" tag script? (In JQuery).

The word "BMW" is wildcard wording. It can be "Ford", "Volvo", etc.

I'm using JQuery version 2.0

$('#'....).???

<td>
   <span column="17" style="cursor:pointer"></span> BMW
</td>

See this question and answer for your answer: http://stackoverflow.com/q/4106809/870729 — random_user_name, Aug 19 '13 at 21:22
have you successfully targeted that element? Without the surrounding html we may not be able to help you get to it. Once targeted, you can easily use regex to remove anything not within the first span tag — Kai Qing, Aug 19 '13 at 21:22
[Do not ever use regex on html](http://stackoverflow.com/a/1732454/209259). — Erik Philips, Aug 19 '13 at 21:24
Yea, I had successfully target the "TD" element as "$('#'+jqgridSpreadsheetId+'ghead_'+jqGridGroup[x].idx.toString()+'_'+x.toString())" which gives me the whole values inside the "TD" element. — fletchsod, Aug 19 '13 at 21:26
[How do I select text nodes with jQuery?](http://stackoverflow.com/questions/298750/how-do-i-select-text-nodes-with-jquery) — dc5, Aug 19 '13 at 21:47

score 8 · Accepted Answer · answered Aug 19 '13 at 21:28

8

Just use nextSibling if the text node is the next sibling like in the question:

$('span[column="17"]').get(0).nextSibling.nodeValue = 'Volvo';

FIDDLE

answered Aug 19 '13 at 21:28

adeneo

312,895
29
395
388

Would that work if the make was Alpha Romeo? next node would be text node, but is alpha romeo 2 text nodes? – Kai Qing Aug 19 '13 at 21:32
@KaiQing - yup, that works just fine -> http://jsfiddle.net/yNnKD/1/ – adeneo Aug 19 '13 at 21:32
What's get() doing here? – isherwood Aug 19 '13 at 21:34
@isherwood - it converts the jQuery selection to a native DOM element. – adeneo Aug 19 '13 at 21:34
@isherwood returns DOM element that matches the selector – Dom Aug 19 '13 at 21:34
Ah, because nodeValue isn't jQuery. Cool. – isherwood Aug 19 '13 at 21:35
Does "get()" works in JQuery v2.0? – fletchsod Aug 19 '13 at 21:38
1

@fletchsod - works everywhere ? – adeneo Aug 19 '13 at 21:46

score 2 · Answer 2 · answered Aug 19 '13 at 21:33

2

Try this out... Note that I'm omitting any text nodes that are whitespace:

$("YOUR TD SELECTOR HERE")
    .contents()
    .filter(
        function() { 
            return this.nodeType == 3 && $(this).text().replace(/^\s\s*/, '').replace(/\s\s*$/, ''); 
        }
    )
    .text('text to replace here');

answered Aug 19 '13 at 21:33

DigitalZebra

39,494
39
114
146

1

+1 for filtering whitespace. Depending on how the html is written and/or minified, this definitely needs to be accounted for. But .text doesn't seem to work (replaceWith does) – dc5 Aug 19 '13 at 21:43

Dom · Answer 3 · 2013-08-19T21:44:45.297

1

You can use .contents(), .filter(), and .replaceWith():

EXAMPLE:

$('table').find('td')
          .contents()
          .filter(function() {
              return this.nodeType === 3;
           })
           .replaceWith("hello world");
});

http://jsfiddle.net/V4wF5/1/

edited Aug 19 '13 at 21:44

answered Aug 19 '13 at 21:27

Dom

38,906
12
52
81

This breaks if the HTML is written with multiple line breaks. – dc5 Aug 19 '13 at 21:46

Henry Rivera · Answer 4 · 2013-08-19T21:49:16.067

1

Edit: I forgot the closing end parenthesis for the first call.

Not sure how you are identifying the column so you may need to change the selector. This is a straight search and replace. You did want to only replace the word BMW, correct?

// Example: $(table.cars td)
$('td').each(function()
{
    var repl = $(this).html().replace('BMW', 'Ford');
    $(this).html(repl);
});

edited Aug 19 '13 at 21:49

answered Aug 19 '13 at 21:28

Henry Rivera

88
5

Saram · Answer 5 · 2013-08-19T22:15:40.687

I do not know any nice jQuery solution, so I provide low level javaScript way. Sorry for that, but believe it helps.

$("td").each(function(i,v){
  for (var i = 0;i < v.childNodes.length;i++){
    if (v.childNodes[i].constructor.name=="Text"){
      v.childNodes[i].nodeValue=v.childNodes[i].nodeValue.replace(/BMW/,"Volvo");
    }
  }        
});

Edit:
It's little bin incompatible so it's better version:

$("td").each(function(i,v){
  for (var i = 0;i < v.childNodes.length;i++){
    if (v.childNodes[i] instanceof Text){
      v.childNodes[i].nodeValue=v.childNodes[i].nodeValue.replace(/BMW/,"Volvo");
    }
  }        
});

Here I bring it to life: http://jsbin.com/ItotOPo/1/edit?html,js,output

How to safetly replace the value after the "td" tag? (In JQuery)

5 Answers5