# Alphabetically ordering url's list



## howard.a.s (Jul 22, 2005)

Hi all.

I am in the process of creating a web site, part of which involves working with some quite long lists of url's.

Here is list of 7 example url's which I have composed for the purpose of this post.

Eat Less chocolate
Learn to Draw and Paint
Improve Your Swimming Abilities
Enjoy More Vegetables
Quit Smoking Tips
Clean Car
Get More Exercise
Yogurt Making Guide

In reality I have a list of perhaps 800 similar url's which I would like to sort into alphabetical order by means of title tag, or 
by means of the visible page link.

I realise that I can sort all my lists manually, a task which will probably take me many, many hours for each, but if there is an easier and less time consuming way then it couldn't hurt to use it.

To this end, I have tried playing around with an online program called Alphabetizer by Flap TV, and a few other similar variations,but no matter what I do, the software always sorts each individual url by means of the first unique letter it encounters - meaning that it will order the above list like so:

Quit Smoking Tips
Clean Car
Learn to Draw and Paint
Eat Less chocolate
Yogurt Making Guide
Enjoy More Vegetables
Get More Exercise
Improve Your Swimming Abilities

As you can see, the Alphabetizer has ordered my list by catagory, or by means of the first letter of the word which directly follows: Get More Exercise

Is there any way that I can get automatic software to order my list by means of the last part of the url which contains, for instance:

title="Get More Exercise">Get More Exercise</a>

whilst ignoring (leaving attached and intact) the first part, for instance:

Clean Car
Eat Less chocolate
Enjoy More Vegetables
Get More Exercise
Improve Your Swimming Abilities
Learn to Draw and Paint
Quit Smoking Tips
Yogurt Making Guide

If anyone knows of software, or any other quicker way for me to achieve the desired results, I'd be very grateful if you'd let me know.

Any constructive advice would be very gratefully received.


----------



## allnodcoms (Jun 30, 2007)

Evening Howard,

How are you storing these URL's at the moment? Are they in a database, files on a server or just a list in the HTML?

Danny


----------



## howard.a.s (Jul 22, 2005)

Hi Danny and thanks for the answer.

The URL's are just in the form of a list in html. I tend to create most of my web pages using Topstyle Pro. I have been continuing my search this evening, looking for any way to alphabetically sort my url lists, but am still unable to find any automatic way that will alphabetize the title tags, or visible page links, whilst ignoring the rest of the html in each url. Of course, I could remove all of the html from each string up to the title tag, but then marrying up the correct segments after automatically sorting the list (always supposing this could be achieved) would probably be a bigger task than ordering the whole list myself by hand.

It seems strange that no one has ever created software that will achieve the results I am looking for. What I mean to say is that there seems to be software available (either free or paid) that will achieve just about anything you can think of when it comes to music/video/broadcast editing, so I think I must have found a niche not yet exploited!

I would have thought that by automatically adding a unique identifier, such as perhaps a $ symbol, using a program such as simple search/replace, at the beginning and end of the section of each url that I need sorting, that this could act as a marker for some form of software sorting tool to know which part to look at and alphabetize, whilst leaving the rest of the url intact and unaltered. This unique identifier could then be removed again after the list is alphabetized.

Only wish I had the technical knowledge to write a program that would do just this!


----------



## Ent (Apr 11, 2009)

Is it only a single list with all those links, or will it be a repeated task?
If you can send me the whole list, I could sort them for you in no time at all. Making and testing a repeatable script would take a while longer.


----------



## howard.a.s (Jul 22, 2005)

There are actually just 2 lists, each containing perhaps between 600 and 1000 links. Both of theses lists will be ready for sorting sometime over the next few days and once I have made final checks to ensure they contain all the necessary links, and that there are no errors.


----------



## allnodcoms (Jun 30, 2007)

There are many, many solutions out there for doing exactly what you are after, but unfortunately they are all server side (or have some form of server side dependance, i.e. database or flat file). For example, if your links were held in a DB on the server, in a table called links with a field called title, you could order your links with one line of code:

```
SELECT * FROM links ORDER BY 'title'
```
This would give you an array of links alphabetically ordered by title tag... You could do it client side (i.e. Javascript), but ideally you'd need to read the data into the page from an external source. It could _feasibly_ be done by ordering the links on the page at run time, but it would be slow, costly (in terms of dev time) and ultimately pointless in the light of other, simpler and quicker options.

If you plan to upkeep this site for any period of time I'd strongly suggest looking into a database storage strategy. It'd be way easier to update you list, and the options available to server side languages such as PHP / MySQL would make ordering and filtering these links so much easier in the long term. Just take a look at the main forum pages, all those links are pulled from a database, they can be automatically updated when new posts come in, and can be ordered, searched and filtered in multiple ways. That's the power of server side scripting...

Danny


----------



## allnodcoms (Jun 30, 2007)

Ent said:


> If you can send me the whole list, I could sort them for you in no time at all.


I'll look after the boards while you're away... See you in a fortnight 

Danny


----------



## Ent (Apr 11, 2009)

allnodcoms said:


> I'll look after the boards while you're away... See you in a fortnight
> 
> Danny


A fortnight? I was thinking of scripting it too you know; it's just that my favourite language is (compiled) VB.net which isn't suitable for posting on the forums. Besides which, a rapidly written script would use some messy techniques I won't be very proud of in a year or two.

For the record, I agree that in terms of long run maintenance it would be far better to use some sort of database and a touch of PHP.


----------



## Ent (Apr 11, 2009)

This may serve your purposes. It's built around a web page itself, so save it in a .htm file and open it in IE, Firefox, or your favourite browser. Essentially you just have to paste the list into the text box and click the Sort Button. The output should replace "No list sorted" in plain text below that.


```
No List Sorted
```


----------



## howard.a.s (Jul 22, 2005)

Apologies for my delay in replying to your posts. I went offline at about 9.30pm yesterday evening and have only just managed to revisit the thread I began earlier in the day. 

Thanks to all who have contributed so far. I am extremely grateful for your time, help and advice.

I am inclined to agree that the best long term solution would probably be with a server side database, except for the fact that my brain seems totally incapable of understanding the likes of MYSQL, Java, Perl, Ajax, Python, and others, the names of which currently escape me. So creating some form of working system along these lines without expert help seems pretty-much out of the question. 

I have taught myself how to build web pages from scratch using html, xhtml, css, which for me has been quite an achievement, but how you guys manage to understand some of the other forms of coding mentioned above is nothing short of miraculous. All I can say is that you must be truly gifted! 

I am going to have a tinker with the method suggested in the most recent reply and see if it achieves the desired result. Once I have given it a try, I'll post back to let you know how I got on.

Once again, thank you all for your help so far.


----------



## howard.a.s (Jul 22, 2005)

Hallelujah, it works!! 

I copied and pasted the supplied code into a notepad doc and then saved this as an html doc. I then proceeded to open the page in Firefox and entered my first list into the text area. The entered list isn't yet completely checked for errors, but hey, I thought, let's give it a go anyway . I hit the sort button and held my breath........and.........the resulting list appeared sorted into alphabetical order! Amazing.  It's truly staggering what some of you geniuses can achieve with just a few lines of coding. :up: Nevertheless, how on earth you learn all about this stuff and properly understand it is beyond me. Honestly, simply compiling web pages from scratch can have my head round in circles, so I cannot begin to imagine how you cope. Still, I have to admit that the results you have achieved with apparently such a small amount of code does rather intrigue me. Please can you tell me what type of code you have used to create this piece of wizardry, and I shall then take some time to read about, and perhaps attempt to try to understand its basics.

Very many thanks to all who have contributed and should I hit upon any glitches, which I doubt, I'll post back over the coming days.


----------



## howard.a.s (Jul 22, 2005)

Okay, so I said I'd post back should I encounter any slight glitches, and after getting over the initial shock of my list appearing sorted upon the click of a button, I then realised that whilst the sorted list appears in perfect alphabetical order, it does not visibly incorporate its associated html. What I mean is, if I paste in the following:

Eat Less chocolate
Learn to Draw and Paint
Improve Your Swimming Abilities
Enjoy More Vegetables
Quit Smoking Tips
Clean Car
Get More Exercise
Yogurt Making Guide

what I get out is:

Clean Car
Eat less Chocolate
Enjoy More Vegetables
Get More Exercise
Improve Your Swimming Abilities
Learn To Draw And Paint
Quit Smoking Tips
Yogurt Making Guide

and not:

Clean Car
Eat Less chocolate
Enjoy More Vegetables
Get More Exercise
Improve Your Swimming Abilities
Learn to Draw and Paint
Quit Smoking Tips
Yogurt Making Guide

Okay, no problem, I thought. I can pick up the whole list as one entire block of html, including each complete url, by viewing the page source code, but when I view the source code for the page all I can see is the source for the Javascript tool, with the rest of the page appearing empty.

Obviously, if I click on each of the individual sorted links, I can take its url from the address bar at the top of the page, but this means re-compiling the entire list one at a time.

Is there any chance that the javascript can be tweeked slightly so that the sorted output retains the entire line of code?


----------



## howard.a.s (Jul 22, 2005)

Whoa! Think I may have found the answer myself. After some head scratching and googling I came upon this page:

http://raventools.com/blog/how-to-view-the-html-output-of-javascript-web-widgets/

I downloaded and installed the Firefox Web Developer add-on:

http://chrispederick.com/work/web-developer/

and by clicking on the 'view generated source' tab, as described in the text, the alphabetized list together with its associated url's is viewable, enabling me to copy and paste out to my own page. Result!

So, without any further need to trouble you (he says whilst holding his breath) I think the problem is solved.

Any feedback you may wish to offer would still be appreciated.


----------



## Ent (Apr 11, 2009)

And that, folks, is a lesson in checking that the website doesn't break your code for you.

These lines

```
for (l=0; l<numLines;l++) {
  lines[l] = lines[l].replace("<","<");
  lines[l] = lines[l].replace(">",">");
}
```
are meant to replace the greater and less tags with their HTML code equivalents (< should become & #60; for example). Instead, because you saw it in a browser, the code would replace < with <, not a very useful substitution!

If you change 
("<","<") to ("<","& #60;")
and 
(">",">") to (">","& #62;")
removing the spaces between & and # it should display as you originally wanted.


----------



## allnodcoms (Jun 30, 2007)

Or "&lt;" and "&gt;" of course...

Danny


----------



## Ent (Apr 11, 2009)

Yes. I wonder why those ones didn't break.


----------



## allnodcoms (Jun 30, 2007)

Who knows... Welcome to the wonderful world of the "intermaweb" 

Danny


----------



## Ent (Apr 11, 2009)

```
No List Sorted
```
That is much more sensible.


----------



## howard.a.s (Jul 22, 2005)

Thanks for posting back again and for supplying the information on how to alter the code so that it displays the full url at the end of the sorting process. I haven't tried making the changes as yet, but will do so later and give it a go. Knowing me and Javascript, the entire script may end up as toast after I've finished tinkering with it. Still, I can always persevere!

Having an enquiring, if sometimes rather dense mind, I would like to ask a question about the way this script works. Not that I'll probably understand what you tell me, but I can try my best.

Okay, so this script is written to sort my list of urls by title tag, yes?

So, what if I wanted to sort my list in a different way, for instance by the part of the url highlighted in red:

Eat Less chocolate

The main problem I can envisage is that there is no leading identifying word, such as title= to identify where the sorting process should be focused. But, let's suppose I were to run the list of urls through a program such as simple search replace http://www.rjlsoftware.com/software/utility/search/
before invoking the sorting process, and add, let's say for aguments sake add a # symbol directly after the words heathy-eating, either before or after the /. This would then act as an identifier for the sorting process to know where it should look to order the list.

What would I change in your Javascript in order for it to sort by the method I describe? Would this be a simple matter of substituting a single word or character in your code, or would it be much more complicated than that?

Please understand that the example of sorting by the highlighted red part of the url just serves as an example, and I may never need to sort my list in this way. But if I could understand how to tweek the supplied code to serve my ongoing needs, then it might be possible for it to help me out again in the future with another list might require sorting by a different method.

Hope you don't mind me asking, but I often find I am better able to understand when someone explains to me in simple terms, as opposed to reading from a book.


----------



## howard.a.s (Jul 22, 2005)

I can now see that you have posted the entire block of code with the changes made, so no need for me to tweek it myself. Phew, that's a relief.

If you are able to respond to my further questions I'd be very grateful.

Very many thanks again for your help and time.


----------



## Ent (Apr 11, 2009)

I'm using what's called a "Bubble Sort" algorithm, which checks whether two entries are the wrong way round and swaps them if they are. The key line there is

if ( lines[l].slice(lines[l].indexOf("title=") + 7) > lines[l + 1].slice(lines[l + 1].indexOf("title=") + 7) )

indexOf finds the first place in the line that _title=_ appears in the string.
+ 7 is to miss the actual text of title=" because that would be the same in every line.
It may make the script ever so slightly more efficient, but if you wanted to change the code I'd suggest getting rid of it.
Slice cuts away everything before title=
And the if statement does the actual check to find out whether they're in the wrong order.

As you can probably guess, if you wanted to sort based on what followed _http_ instead of what followed _title=_, you'd change it to
if ( lines[l].slice(lines[l].indexOf("http")) > lines[l + 1].slice(lines[l + 1].indexOf("http") ) 
and likewise for any other marker, including #.
*NOTE* that you have to change it on both sides.

The code could equally be modified to use a more complicated marker such as "the second / after .com" but that would require a few more changes.

Feel free to ask for help if you get stuck again.


----------



## howard.a.s (Jul 22, 2005)

Thanks for the explanation which I shall study, absorb and do my best to understand. Please keep a watch out over the next few days, as I may post back to this string if I have further related questions. You are clearly very accomplished when it comes to understanding and composing javascript. You mention earlier in the posts that your favourite language is VB.net. I cannot imagine beginning to properly understand just one of these languages - and you can work with two. How do you manage to make sense of it all?


----------



## howard.a.s (Jul 22, 2005)

I guess that your obvious skills as (not sure what the correct term should be) a coder, or programmer, must have inspired me, because I've been reading up on Javascript a little bit in an effort to begin to gain a better understanding of its capabilities. I have been following: http://www.webteacher.com/javascript/index.html

Can you suggest any even better sites which provide easy to understand lessons on Javascript?

You mentioned posting back if I had any further questions, and I just wondered if the </a> tag being left missing from the end of each sorted line is another issue raised by the browser I am using, which is Firefox, or whether it is an unavoidable consequence of the alphabetizing method used.

If this can be easily rectified then that would be super. If not, I can certainly live with the final effect as it currently stands.

<a href="http://www.mydomain.com/automobile/cleaner_car?5266" title="Clean Car">Clean Car
<a href="http://www.mydomain.com/healthy-eating/less-chocolate?5266" title="Eat Less Chocolate">Eat Less chocolate
<a href="http://www.mydomain.com/healthy-eating/veg-more?5266" title="Enjoy More Vegetables">Enjoy More Vegetables
<a href="http://www.mydomain.com/personal-health/exercise_easily?5266" title="Get More Exercise">Get More Exercise
<a href="http://www.mydomain.com/sports_activities/swimming-skills?5266" title="Improve Your Swimming Abilities">Improve Your Swimming Abilities
<a href="http://www.mydomain.com/fun-stuff/paint_and_draw?5266" title="Learn to Draw and Paint">Learn to Draw and Paint
<a href="http://www.mydomain.com/addiction_help/smoking-cessation?5266" title="Quit Smoking Tips">Quit Smoking Tips
<a href="http://www.mydomain.com/healthy-eating/make_yogurt?5266" title="Yogurt Making Guide">Yogurt Making Guide

Of course, perhaps it's me that's overlooking something, or by using a different browser this might not even occur. Who knows?

Please post back if you have any further thoughts or suggestions.


----------



## Ent (Apr 11, 2009)

Just check the code I posted above; I modified it slightly from when you saw it last.
I have no idea why the </a> tags were disappearing though it happened in all the browsers I tested in; I had put in a bit of code to stick them back in place but there again the forum broke it. If you examine the source of what you see now, it'll have a load of random </a>s hanging onto the end, which don't show because the browser interprets them as actually ending links. If you swap in the revised code it should come out fine.

I'd struggle to recommend anything in terms of Javascript tutorials, basically because I never used them. You'd be better off starting a fresh thread asking for recommendations.


----------



## howard.a.s (Jul 22, 2005)

Just got back to the forum and found your latest post. Thanks. I'll give this a try and see what happens now.

In one of your earlier posts you wrote:

As you can probably guess, if you wanted to sort based on what followed http instead of what followed title=, you'd change it to
if ( lines[l].slice(lines[l].indexOf("http")) > lines[l + 1].slice(lines[l + 1].indexOf("http") )
and likewise for any other marker, including #.
NOTE that you have to change it on both sides.

So that I can begin to gain a clearer understanding, I'd like to ask another question based on the above.

You say that: indexOf finds the first place in the line that title= appears in the string.
+ 7 is to miss the actual text of title=" because that would be the same in every line.

So, if I wanted to sort my list based on what followed http instead of what followed title=, then presumably I should change not only the indexOf("title=") to indexOf("http=") but also, based on the part where you write that: + 7 is to miss the actual text of title=" because that would be the same in every line, should I also be inserting + 6 into the appropriate position so that http=" is ignored? If I can get this concept clear, then I may well be able to alter this script to suit my needs without too much of a headache..


----------



## howard.a.s (Jul 22, 2005)

Just tried out the new version of your script and it works perfectly, with the </a> attached to the end of each and every string after sorting. Without doubt you are a true genius. Seriously though, thanks very, very much.


----------



## Ent (Apr 11, 2009)

howard.a.s said:


> You say that: indexOf finds the first place in the line that title= appears in the string.
> + 7 is to miss the actual text of title=" because that would be the same in every line.
> 
> So, if I wanted to sort my list based on what followed http instead of what followed title=, then presumably I should change not only the indexOf("title=") to indexOf("http=") but also, based on the part where you write that: + 7 is to miss the actual text of title=" because that would be the same in every line, should I also be inserting + 6 into the appropriate position so that http=" is ignored? If I can get this concept clear, then I may well be able to alter this script to suit my needs without too much of a headache..


That is correct.
Actually, any number below that will work, because :
title="Bra
title="Clo
title="Dav

would sort the same as :
e="Bra
e="Clo
e="Dav

Or :
Bra
Clo
Dav

However, once you get beyond that number, you're sorting
ra
lo
av
, which is of course sorted into a different order.
The easiest option is to use 0, but as you correctly note any number until differences start appearing will work.


----------



## howard.a.s (Jul 22, 2005)

Hi again and thanks for all your help with regards to the matter of sorting lists into a -z order. Your latest version of the script works brilliantly and I now have fully alphabetized lists. Your explanation of how the code works is very helpful, too. Thank you on all counts. Incidentally, I have now posted a new thread relating to the EU Cookie Directive, in this same section. Perhaps you might care to take a look and offer any advice, should you be able to.


----------



## howard.a.s (Jul 22, 2005)

Just a quick update to this thread. I am still working towards the completion of my web site, which will include the sorted lists that have been the topic of this thread. Once the site is ready, I will post back with a link to show the completed alphabetized page.


----------

