How do I use regex to do some Javascript string manipulation?

Question

I have a string that begins and ends with the table row tag <tr>...</tr>. There are multiple <td>s inside this, that take the form:

<td class="someClass">TextIWant TextI Do NOtWant</td><td><img src='green.png'></td>
<td class="someClass">TextIWant TextI Do NOtWant</td><td><img src='blue.png'></td>

What I'm looking to do, is look at the color.png, and add a class to the td, and trim some of the text inside the td. The final output should be something like:

<td class="someClass green">TextIWant</td>
<td class="someClass blue">TextIWant</td>

How can I do this with regular expressions?

so how do you tell the difference between the text that you want and the text that you don't want? — Sam I am says Reinstate Monica
– Sam I am says Reinstate Monica, Commented Sep 4, 2013 at 20:54
You could definitely avoid using regex for most of this - get the source of the image, strip the extension; append that to the class list of the previous cell; use a regex to strip out the unwanted text. — Nightfirecat
– Nightfirecat, Commented Sep 4, 2013 at 20:55
Do you have a regex that you think should work, and doesn't? We are more willing to help fix your code than to write the code for you. — Kendall Frey
– Kendall Frey, Commented Sep 4, 2013 at 20:56
Do you plan to perform your replacements with javascript in the browser? — user1636522
– user1636522, Commented Sep 4, 2013 at 20:57

Explosion Pills · Accepted Answer · 2013-09-04 21:01:23Z

2

You probably need to provide a lot more details about what you need to do, but the best course of action would be to use a DOM parser and JavaScript has a very nice one built in (IE8- is not supported).

// Select all odd `td` nodes and iterate over them
Array.prototype.forEach.call(document.querySelectorAll("td:nth-child(odd)"),
function (elem) {
    // Get the immediately following sibling (with the img)
    var imgTd = elem.nextSibling;
    // Get the color from the <img>
    elem.className += ' ' + imgTd.querySelector("img").getAttribute("src")
        .replace('.png', '');
    // Remove the sibling
    imgTd.parentNode.removeChild(imgTd);
    // Update the initial elements text to remove the undesired text
    elem.textContent = elem.textContent.replace("TextI Do NOtWant", "");
});

http://jsfiddle.net/e9vrK/

answered Sep 4, 2013 at 21:01

Explosion Pills

192k56 gold badges341 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Freakishly Over a year ago

I think this is the closest to what I need. I will try it out, and let you know

andrew · Accepted Answer · 2013-09-04 21:28:01Z

0

Id do this with jquery, something like:

var td;
var img;
var color;
 $('img').each(function(){
   img=$(this);
   td = img.closest('td').prev();
   color = img.attr('src').split('.')[0]
     td.html('the image is '+color+'.png').addClass(color);
 });

demo here http://jsfiddle.net/QHkbe/2

edited Sep 4, 2013 at 21:28

answered Sep 4, 2013 at 21:02

andrew

9,6039 gold badges36 silver badges62 bronze badges

Collectives™ on Stack Overflow

How do I use regex to do some Javascript string manipulation?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related