replace html in string with Javascript

Question

I've searched around, but didnt succeed in finding the answer. This is my problem / queystion:

I get an page out of an CKEDITOR with:

var oldText = CKEDITOR.instances.message.getData();

So far, so good. The string holds something like this:

<table cellpadding="0" cellspacing="0" width="100%">
    <tbody>
        <tr>
            <td align="left"
                style="padding-top: 24px; padding-right: 0px; padding-bottom: 0px; padding-left: 28px;"
                valign="top">
                <!--//logo//-->
                <a href="urlToSite" target="_blank"><img alt=""
                    src="urlToSite/image/data/Logo/logog7.png" /></a>
            <!--//end logo//-->
            </td>
            <td align="right"
                style="padding-top: 20px; padding-right: 28px; padding-bottom: 0px; padding-left: 0px;"
                valign="top">
                <div style="font-size: 18px; color: rgb(53, 115, 173);">Monday, 29
                    July 2013</div>

                <div style="font-size: 11px; color: rgb(53, 115, 173);">
                    <a
                        href="http://urlToSite/index.php?route=ne/subscribe&amp;uid={uid}&amp;key={key}"
                        style="text-decoration: none; color: rgb(53, 115, 173);">Subscribe</a>&nbsp;|&nbsp;<a
                        href="http://urlToSite/index.php?route=ne/unsubscribe&amp;uid={uid}&amp;key={key}"
                        style="text-decoration: none; color: rgb(53, 115, 173);">Unsubscribe</a>&nbsp;|&nbsp;<a
                        href="urlToSite"
                        style="text-decoration: none; color: rgb(53, 115, 173);">Visit our
                        site</a>
                </div>
            </td>
        </tr>
    </tbody>
</table>

Now do i want to change the unsubscribe link to something like this ( this is hapening in an switch statement ):

http://urlToSite/index.php?route=ne/unsubscribe&amp;uid={uid}&amp;key={key}&c=1&l=12

( note, the l parameter is dynamic ). But i also wan't to be able to make him to original url again.

How can i search inside the string for that URL ( with al those extra parameters, or without, that depends ) and replace it.

I'm cleuless about it, but if you guys could help me, or even point me a little bit in the right direction, will that be very great.

So in sort, this is what i want to achief:

I've got this URL: http://urlToSite/index.php?route=ne/unsubscribe&uid={uid}&key={key}
I want to change it to this url: http://urlToSite/index.php?route=ne/unsubscribe&uid={uid}&key={key}&c=1&i5
Then i wan't to be able to make the url something like this: http://urlToSite/index.php?route=ne/unsubscribe&uid={uid}&key={key}&c=1&i=2
But i also wan't to be able to revert the URL back to normal ( this can i also do within an static variable, so that isn't an big deal... )

-btw- sorry for the bad english ;)

EDIT

Do you guys think that the following is an good way to solve the problem???

1: I save the default URL in an string
2: I do an replace with the default URL on the oldText, and insert the new URL
3: I save the new URL in an difrent string
4: Next time i do an replace with the saved new URL on the oldText and insert an newer URL
5: and save that and so on...

EDIT2 The code that i use now is as follows ( the answer came from Woody )

var oldText = CKEDITOR.instances.message.getData();
var div = document.createElement("div");
div.innerHTML = oldText;
var a = div.querySelector('a[href^="http://www.gospel7.com/index.php?route=ne/unsubscribe"]');
$(a).attr("href", "http://urlToSite/index.php?route=ne/unsubscribe&amp;uid={uid}&amp;key={key}&c=1&l=12/")
console.log(a);

@putvande, that's the point, i can't think anything that will be bullet proof. The only thing i did think about just a second ago is that i can store the new url in an string, and search for that url the next time and replace it with the default url + the custom get parameters... Do you think that that is an nice way to do it??? — Mathlight
– Mathlight, Commented Jul 29, 2013 at 20:41

Woody · Accepted Answer · 2013-07-29 20:50:57Z

1

get that HTML string and put it into an in memory div. so you can manipulate it.

var div = document.create element("div");

div.innerHTML = oldText;

now you have a div you can query for the anchor tag.

 var a = div.querySelector("a[href^=<start of URL you want to change] ");

now set the href on the anchor to what you want. when done get the innerHTML of the div.

answered Jul 29, 2013 at 20:50

Woody

8,0822 gold badges23 silver badges25 bronze badges

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

1 Comment

Woody Over a year ago

since you are using ckeditor are you able to control the insertion of the unsubscribe link ? it sounds like that would save you the hassle of trying to change it after it has been inserted in presumably the wrong format ?

kery · Accepted Answer · 2013-07-29 20:45:23Z

0

var oldURL = "http://urlToSite/index.php?route=ne/subscribe&amp;uid={uid}&amp;key={key}";
var newURL = "http://urlToSite/index.php?route=ne/unsubscribe&amp;uid={uid}&amp;key={key}&c=1&l=12"
var newText = oldText.replace("oldURL", "newURL");

Are you just doing a find and replace (while storing your current variables)?

If you need things to be more dynamic, check out regular expressions http://www.regular-expressions.info/reference.html

answered Jul 29, 2013 at 20:45

kery

4013 silver badges12 bronze badges

1 Comment

Mathlight Over a year ago

I was hoping to do an find and replace yes, but i ran against the problem that i don't know if the get parameters ( c&i ) are added to the URL. So i can't do an default find and replace. But what do you think about what i've written down add my question ( the edit part )

Collectives™ on Stack Overflow

replace html in string with Javascript

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related