LinuxQuestions.org
Welcome to the most active Linux Forum on the web.
Go Back   LinuxQuestions.org > Forums > Non-*NIX Forums > Programming
User Name
Password
Programming This forum is for all programming questions.
The question does not have to be directly related to Linux and any language is fair game.

Notices


Reply
  Search this Thread
Old 08-06-2016, 05:40 PM   #1
dedec0
Member
 
Registered: May 2007
Posts: 846

Rep: Reputation: 29
Red face Javascript challenge: a Facebook link cleaner?


I would like to have a site that:

- is static, in the sense that all of its source and code is contained in the same file

- is compatible with most old browsers as possible, so newer Javascript details or functions or whatever will possibly not be used in it. (so, at most HTML 4.01 and CSS 2 era things)

- its main function is to clean URLs that Facebook hides inside its own domain to track users that click on them (which is something I do not like at all to do, or to have my friends doing; but cleaning it manually for long URLs with special characters is painful)

An example URL (with some information manually edited, and broken in a few lines with a reasonable width) is:

Code:
http://lm.facebook.com/l.php?u=http%3A%2F%2Fvejasp
.abril.com.br%2Fmateria%2Fjovem-conta-detalhes-de-caso-de-
assedio-envolvendo-pastor-marco-feliciano&h=1AAAAAAAA
&enc=AAA1AAA_1AAAAAAA1AAA1AA_AAAAAAAAAAAAAAAAAAAA11AA
1AAAAAAAAAAAAAAAAAAAAAAAAAAA1A1AAAAAAAAAA111AAAA11AAAA
AAAAAAA--AA11AAAA1AAAAAAAAAAAAAAAAAAAAAA1AAAAA1-AA&s=1
I imagine that all the script need to do is to decode and print the u parameter in that URL.

The basic HTML source code that I would use to start this is:

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<!-- This document was successfully checked as HTML 4.01 Strict! -->
<html>
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" media="screen" href="e.css">
    <title>...</title>
 </head>
 <body>
    <h1>URL cleaner:</h1>
    <table>
      <tr>
	<td>
	  <form action="here.php" method="post">
	     <div><textarea cols=80 rows=20 name="t"></textarea></div>
	     <div><input type=submit name="clean" value="clean"></div>
	  </form>
	 </td>
      </tr>
    </table>
 </body>
</html>
No javascript is there because I do not really know how to create it from scratch - I just "tune" little bits of what I eventually fiddle with.

Is there anyone around here that would like to make this? It is probably easy and fast to do with whomever programs in Javascript for a long time - and this is why I am lazy for trying and doing it myself.

Any tries there? Please know that I will make comments and tell everyone around here the possible "defects" it may have (for me and my planned narrowed-down-and-limited uses).

Last edited by dedec0; 08-06-2016 at 06:05 PM.
 
Old 08-06-2016, 11:44 PM   #2
dugan
LQ Guru
 
Registered: Nov 2003
Location: Canada
Distribution: Slackware
Posts: 8,497

Rep: Reputation: 3523Reputation: 3523Reputation: 3523Reputation: 3523Reputation: 3523Reputation: 3523Reputation: 3523Reputation: 3523Reputation: 3523Reputation: 3523Reputation: 3523
I'd recommend doing it as a Tampermonkey/Greasemonkey script. Editing specific sites when loading them is more or less specifically what they're for.

Last edited by dugan; 08-07-2016 at 12:12 AM.
 
Old 08-07-2016, 08:13 AM   #3
dedec0
Member
 
Registered: May 2007
Posts: 846

Original Poster
Rep: Reputation: 29
That page would load only a single time, and can even be cached locally. Since the script is contained in it, it would need no more network access. It would probably create a <p> (or similar) with the clean URL to be copied or used (it can even be a <a>). A greasemonkey script to all FB pages is beyond what I need, and would be wasting CPU cycles most of the time.
 
Old 08-07-2016, 08:40 AM   #4
keefaz
LQ Guru
 
Registered: Mar 2004
Distribution: Slackware
Posts: 6,230

Rep: Reputation: 713Reputation: 713Reputation: 713Reputation: 713Reputation: 713Reputation: 713Reputation: 713
This could "clean" the url the way you want

Code:
// Input:  raw url
// Output: "cleaned" url

function parseUrl(url) {
  var a = url.match(".*u=(.*?)&");
  return (a && a[1]) ? decodeURIComponent(a[1]) : "";
}
 
Old 08-07-2016, 10:02 AM   #5
dedec0
Member
 
Registered: May 2007
Posts: 846

Original Poster
Rep: Reputation: 29
Is this function compatible with older browsers?

And I do not know how to use that into that HTML... I have made a few small tries, but none worked and now it is in this obviously broken state:

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<!-- This document was successfully checked as HTML 4.01 Strict! -->
<html>
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <link rel="stylesheet" media="screen" href="e.css">
    <script type="text/javascript">
    <!--
    // Input:  raw url
    // Output: "cleaned" url
    function cleaner(url)
    {
	var a = url.match(".*u=(.*?)&");
	document.getElementById('realurl').innerHTML = "test";
	window.alert("executing?");
	return (a && a[1]) ?
	    decodeURIComponent(a[1]) :
	    "";
    }
    // -->
    </script>
    <title>...</title>
 </head>
 <body>
    <h1>URL cleaner:</h1>
    <table>
      <tr>
	<td><span id="realurl"></span></td>
      </tr>
      <tr>
	<td>
	  <form action="here.php" method="post">
	     <div><textarea cols=80 rows=20 name="t" onchange="cleaner(document.getElementById('t').innerHTML)"></textarea></div>
	     <div><input type=submit name="clean" value="clean"></div>
	  </form>
	 </td>
      </tr>
    </table>
 </body>
</html>
To make my tries I have read a few pages, but there are many questions that they do not answer, and that I aim to have in this page. For example: http://stackoverflow.com/questions/1...-in-javascript

Last edited by dedec0; 08-07-2016 at 11:47 AM.
 
Old 08-07-2016, 10:33 AM   #6
keefaz
LQ Guru
 
Registered: Mar 2004
Distribution: Slackware
Posts: 6,230

Rep: Reputation: 713Reputation: 713Reputation: 713Reputation: 713Reputation: 713Reputation: 713Reputation: 713
You assign a name to your textarea but you try to get its innerHTML by its non assigned id, and you rather would use its value anyway

Try
PHP Code:
<form action="here.php" method="post">
  <
div>
    <
textarea cols=80 rows=20 id="theRaw"></textarea>
  </
div>
   <
div>
    <
textarea cols=80 rows=20 id="theClean"></textarea>
  </
div>
  <
div><input type="button" name="clean" value="Clean URL" 
           
onclick="cleaner(document.getElementById('theRaw'), document.getElementById('theClean'));return false;">
  </
div>
</
form
Code:
// input : fromInput, toInput 
// (form text input / text area)
// output: none

function cleaner(fromInput, toInput) {
	var url = fromInput.value;
	var a = url.match(".*u=(.*?)&");
        toInput.value = "";
        if (a && a[1]) toInput.value = decodeURIComponent(a[1]);
}

Last edited by keefaz; 08-07-2016 at 10:34 AM.
 
1 members found this post helpful.
Old 08-08-2016, 07:55 AM   #7
dedec0
Member
 
Registered: May 2007
Posts: 846

Original Poster
Rep: Reputation: 29
Lightbulb



It worked. How compatible or not is this code?

Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
        "http://www.w3.org/TR/html4/strict.dtd">
<!-- This document was successfully checked as HTML 4.01 Strict! 2016-08-08 -->
<html>
 <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <script type="text/javascript">
    <!--
    // input : fromInput, toInput 
    // (form text input / text area)
    // output: none
    function cleaner(fromInput, toInput)
    {
      var url = fromInput.value;
      var a = url.match(".*u=(.*?)&");
      toInput.value = "";
      if (a && a[1])
	toInput.value = decodeURIComponent(a[1]);
    }
    // -->
    </script>
    <title>FB URL cleaner</title>
 </head>
 <body>
    <h1>FB URL cleaner:</h1>
    <table>
      <tr>
	<td><span id="realurl"></span></td>
      </tr>
      <tr>
	<td>
	<form action="nowhere.php" method="post">
	  <div>
	    <textarea cols=80 rows=4 id="theRaw"
	      onchange="
		cleaner(  document.getElementById('theRaw'),
			  document.getElementById('theClean'));
		return false;">
	    </textarea>
	  </div>
	  <div>
	    <textarea cols=80 rows=4 id="theClean"></textarea>
	  </div>
	  <div>
	    <input type="button" name="clean" value="Clean URL" 
	      onclick="
		cleaner(  document.getElementById('theRaw'),
			  document.getElementById('theClean'));
		return false;">
	  </div>
	</form>
	 </td>
      </tr>
    </table>
 </body>
</html>
<!-- vim: fileencoding=utf-8: ts=8: sw=2: sts=2
-->

Last edited by dedec0; 08-08-2016 at 08:56 AM.
 
Old 08-08-2016, 08:30 AM   #8
dedec0
Member
 
Registered: May 2007
Posts: 846

Original Poster
Rep: Reputation: 29
A note about the above code: it is very easy to clean and copy an URL from the above code: ctrl+v, tab, ctrl+a, ctrl+c. And in my favorite browser there is the ctrl+shift+v to paste and go!
 
Old 08-08-2016, 11:36 AM   #9
keefaz
LQ Guru
 
Registered: Mar 2004
Distribution: Slackware
Posts: 6,230

Rep: Reputation: 713Reputation: 713Reputation: 713Reputation: 713Reputation: 713Reputation: 713Reputation: 713
Quote:
Originally Posted by dedec0 View Post


It worked. How compatible or not is this code?
I don't know, but I would think it should be compatible with most browsers

Check yourself compatibility with:

decodeURIComponent()
getElementById()
String.match()

Last edited by keefaz; 08-08-2016 at 11:38 AM.
 
1 members found this post helpful.
Old 08-08-2016, 02:18 PM   #10
dedec0
Member
 
Registered: May 2007
Posts: 846

Original Poster
Rep: Reputation: 29
It worked as I posted there - but I did not test too much today. Thank you!

Last edited by dedec0; 08-08-2016 at 02:20 PM.
 
Old 12-31-2017, 05:35 AM   #11
dedec0
Member
 
Registered: May 2007
Posts: 846

Original Poster
Rep: Reputation: 29
Post Thread's summary (useful for reusing the thread's main results and informations, I took sometime to do that now)

Quote:
Originally Posted by dedec0 View Post
It worked as I posted there - but I did not test too much today. Thank you! :)
"Posted there": at post #7. We may simply copy all the code in this post and save it wherever we want: locally or in a page we want to have it. There are *no* other files it will access: no script, no style, no image. A simple and directed HTML 4.01 file, and it was also checked in W3C's validator, as indicated in its first lines. This file is saved (and given as) using UTF-8 encoding (and Vim editor will keep doing that due its modeline in the end) - so adding/changing any text in/for any language should be very easy, although I prefer it with almost no text (and in my saved file, its two strings are in my language, not in English, as given in #7).

Quote:
Originally Posted by dedec0 View Post
A note about the above code: it is very easy to clean and copy an URL from the above code: ctrl+v, tab, ctrl+a, ctrl+c. And in my favorite browser there is the ctrl+shift+v to paste and go! :)
The button "Clean URL" may not be necessary to use: My use of that util is simple: 1) I pasted the bad URL (copied from FB) in the first textarea, 2) press TAB to change the focus the the second textarea, 3) the second textarea is changed by the page's script to the hidden URL argument in the first, then I already CTRL+A CTRL+C and use it. My uses are either: doing a "ctrl+l ctrl+v enter"; or a "ctrl+l ctrl+shift+v"; or anything we aimed for the cleaned URL.

In #9, keefaz pointed 3 important things the page has, and them should be the crucial parts to be compatible with the browser we use the page in: the JS functions decodeURIComponent(), getElementById(), String.match(). These are present in browsers' versions I have from several years ago (and still use), so compatibility should not be something to make adjusts in that page.
 
  


Reply

Tags
javascript


Thread Tools Search this Thread
Search this Thread:

Advanced Search

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts

BB code is On
Smilies are On
[IMG] code is Off
HTML code is Off



Similar Threads
Thread Thread Starter Forum Replies Last Post
[SOLVED] Any Javascript pro's lurking and looking for a challenge? Get element ID of caret (cursor position)? wh33t Programming 16 04-17-2016 03:17 AM
JavaScript - hide search box and link ? czezz Programming 3 08-11-2015 07:08 AM
[SOLVED] Little JavaScript Challenge mzh Programming 7 08-31-2011 05:04 PM
xhtml/CSS rectangular link region (without javascript or images)? dla-nor Programming 2 02-21-2008 06:30 PM
javascript html link in a form to not reload page true_atlantis Programming 4 10-26-2006 09:49 AM

LinuxQuestions.org > Forums > Non-*NIX Forums > Programming

All times are GMT -5. The time now is 11:28 AM.

Main Menu
Advertisement
My LQ
Write for LQ
LinuxQuestions.org is looking for people interested in writing Editorials, Articles, Reviews, and more. If you'd like to contribute content, let us know.
Main Menu
Syndicate
RSS1  Latest Threads
RSS1  LQ News
Twitter: @linuxquestions
Facebook: linuxquestions Google+: linuxquestions
Open Source Consulting | Domain Registration