Javascript cannot replace string with a URL

Question

I am taking a Javascript course by Udacity. The project is to build a resume. Neither the course nor another question really answers my question.

There is a resumeBuilder.js file, and a helper.js file. The helper.js file contains variables with strings that need to be replaced, such as %data%. I modified one of the variables myTwitter to myWebsite and added an HTML tag to open my website in a new tab.

In the resumeBuilder.js file, I have these variables:

var myWebsite = HTMLwebsite.replace("%data%", "http://learn.website.com");
myWebsite = HTMLwebsite.replace("%website%", "www.website.com");

...which are supposed to replace the strings in this variable in helper.js:

var HTMLwebsite = '<li class="flex-item"><span class="orange-text">website</span><span class="white-text"><a href="%data%" target="_blank">%website%</a></span></li>';

On the index.html page, the website and link appear; however, when I click on the link for www.website.com, it opens a new tab in my browser (Firefox) but takes me to a local file path ending in '%data%' such as:

file:///C:/Users/user/Documents/Education/Javascript/udacity/git_repos/frontend-nanodegree-resume/%data%

When I hard-coded helper.js' variable to the following, it directed me to the URL I wanted:

var HTMLwebsite = '<li class="flex-item"><span class="orange-text">website</span><span class="white-text"><a href="http://learn.website.com" target="_blank">%website%</a></span></li>';

I would like to know how to not hard-code helper.js and use the replace method in resumeBuilder.js to make the URL work.

I also tried adding \ next to / and : characters, and changing %data% to \"%data%\" in helper.js and resumeBuilder.js but that did not fix it.

Thank you!

trincot · Accepted Answer · 2016-09-25 17:23:20Z

3

The issue is that your second replace does not start from the previous result, but from the original variable again. So the first replace's effect is lost

Change to:

var myWebsite = HTMLwebsite.replace("%data%", "http://learn.website.com");
myWebsite = myWebsite.replace("%website%", "www.website.com");

answered Sep 25, 2016 at 17:23

trincot

357k38 gold badges282 silver badges338 bronze badges

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

1 Comment

host_255 Over a year ago

Thank you! That helped a lot @trincot

Nilushanan Kulasingham · Accepted Answer · 2016-09-25 18:05:19Z

1

In the following code, you are overriding your initial change

var myWebsite = HTMLwebsite.replace("%data%", "http://learn.website.com");
myWebsite = HTMLwebsite.replace("%website%", "www.website.com");

So in this example, your second myWebsite is going back to the initial HTMLWebsite variable and replacing %website% with your code. This is discarding the changes you applied in your first myWebsite declaration.

In order to fix this, there are two options:

Firstly you an change the variables one at a time, like this:

var myWebsite = HTMLwebsite.replace("%data%", "http://learn.website.com");
myWebsite = myWebsite.replace("%website%", "www.website.com");

Or you can chain the two replace functions like this:

var myWebsite = HTMLwebsite.replace("%data%","http://learn.website.com")
                           .replace("%website%", "www.website.com");

answered Sep 25, 2016 at 18:05

Nilushanan Kulasingham

463 bronze badges

1 Comment

host_255 Over a year ago

Thank you very much

Collectives™ on Stack Overflow

Javascript cannot replace string with a URL

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