Displaying a simple HTML page from input embedded into a URL (part III)

hi,

I need to adapt the following script to allow any custom list of URLs + display text to show:

https://www.experts-exchange.com/questions/29086239/Displaying-a-simple-HTML-page-from-input-embedded-into-a-URL-part-II.html

Example:

Input URL:

mypage.html/links==Click for apples##https://www.google.com/search?q=apples@@Or for oranges##https://www.bing.com/search?q=oranges

Displayed output:

Click for apples
Or for oranges

Thanks
xeniumAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

xeniumAuthor Commented:
In the above example the delimiters are @@ between URLs and ## between display text and URL, though other delimiters could be used.
0
Julian HansenCommented:
I would use URL Encoding to build your URL's rather than using double character delimiters.

I have chosen the following
?links=Label%20With%20Encoded%20Spaces
| (%7C) separates LABEL from URL
, (%2C) separates different link groups
= is encoded to %3D
? is encoded to %3F
Space is encoded as %20

Resulting URL
?links=Click%20for%20apples%7Chttps://www.google.com/search%3Fq%3Dapples%2COr%20for%20oranges%7Chttps://www.bing.com/search%3Fq%3Doranges

Open in new window

Code to handle this URL
<script>
$(function() {
  if (window.location.search.indexOf('=') > -1) {
    var search = decodeURIComponent(window.location.search.split('=')[1]).split(',');
	
    var list = $('#links');
    for(var i = 0; i < search.length;i++) {
	  var bits = search[i].split('|');
	  console.log(bits);
      var link = document.createElement('a');
      link.href = bits[1];
      link.target = '_blank';
      list.append($('<li>', {class: 'list-group-item'}).append($(link).html(bits[0])));
    }
  }
});
</script>

Open in new window


Example url http://www.marcorpsa.com/ee/t3003a.html?links=Click%20for%20apples%7Chttps://www.google.com/search%3Fq%3Dapples%2COr%20for%20oranges%7Chttps://www.bing.com/search%3Fq%3Doranges
0
ste5anSenior DeveloperCommented:
URL's of what schema? Cause your input "URL"'s are none. At least I don't recognize the protocol.
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

Julian HansenCommented:
Let's say your search string contains ',' that are not meant to be delimiters - then you can use something else.

Here is an example that uses !! instead of a comma for the group delimiter
URL
?links=Click%20for%20apples%7Chttps://www.google.com/search%3Fq%3Dapples!!Or%20for%20oranges%7Chttps://www.bing.com/search%3Fq%3Doranges

Open in new window

Updated code
<script>
$(function() {
  if (window.location.search.indexOf('=') > -1) {
    var search = decodeURIComponent(window.location.search.split('=')[1]).split('!!');

    var list = $('#links');
    for(var i = 0; i < search.length;i++) {
	  var bits = search[i].split('|');
      var link = document.createElement('a');
      link.href = bits[1];
      link.target = '_blank';
      list.append($('<li>', {class: 'list-group-item'}).append($(link).html(bits[0])));
    }
  }
});
</script>

Open in new window

Working sample here  http://www.marcorpsa.com/ee/t3003b.html?links=Click%20for%20apples%7Chttps://www.google.com/search%3Fq%3Dapples!!Or%20for%20oranges%7Chttps://www.bing.com/search%3Fq%3Doranges
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
xeniumAuthor Commented:
Great thanks a lot.
0
xeniumAuthor Commented:
Any idea why the page works on my local pc but not if i copy it to my server (bluehost)?
0
Julian HansenCommented:
It shouldn't matter where it is - the code runs in the browser?

Any errors in the console
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
HTML

From novice to tech pro — start learning today.