[SOLVED] Javascript challenge: a Facebook link cleaner?

dedec0 · 08-06-2016, 04:40 PM

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).

dugan · 08-06-2016, 10:44 PM

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.

dedec0 · 08-07-2016, 07:13 AM

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.

keefaz · 08-07-2016, 07:40 AM

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]) : "";
}

dedec0 · 08-07-2016, 09:02 AM

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

keefaz · 08-07-2016, 09:33 AM

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]);
}

dedec0 · 08-08-2016, 06:55 AM

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
-->

dedec0 · 08-08-2016, 07:30 AM

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!

keefaz · 08-08-2016, 10:36 AM

Quote:

Originally Posted by dedec0

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()

dedec0 · 08-08-2016, 01:18 PM

It worked as I posted there - but I did not test too much today. Thank you!

dedec0 · 12-31-2017, 04:35 AM

Quote:

Originally Posted by dedec0

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

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.