I want to program a text transformer. where to start?

One way would be to take the block a text (essentially one long string), and use JavaScript's indexOf() method to find out the index of where you want to begin, the nice thing about his method is that it takes an optional second parameter as a starting point. Then combine that with JavaScript's slice() method.

An example outline without jQuery would be: 1) store the text block in a variable ie. var textBlock = "someStuff_http://yourLink.jpg_moreStuff"; 2) get the index of the link if the link exists: var startIndex = textBlock.indexOf("http://"); 3) get the end of your link: var endInext = textBlock.indexOf("jpg", startIndex); //index returned is the index of "j" //now you know where the link starts and ends 4)take out the link: var link = textBlock.slice(startIndex, endIndex + 2); //added 2 to get the "p" and "g" in "jpg"; 5) replace the text: textBlock.replace(link, yourNewLinkString);

It's tricky with links, because I'm assuming you won't know their domain routes ahead of time, if so, just skip to step 5 and call replace(). You would also just skip to replace in the case of your changing color example.

Lastly, it should be noted that the outline above, will only find the first link and change it. If you wanted to create function that looked through all, it would be more or less the same, but you'd want to capture the index of where you left off and start from there.