Retrieve a URL from a string using Javascript

Question

Retrieve a URL from a string using Javascript

After hours of searching, I'm still stuck on this issue that seems like it could easily be solved with a quick Google search.

Basically, I have this string that I'm ajaxing from another site:

'function onclick(event) { toFacebook("http://www.domain.com.au/deal/url-test?2049361208?226781981"); }'

It looks like this because I'm extracting the onclick.

All I want to do is extract the URL from the string.

Any assistance would be greatly appreciated.

---- edit ----

If I go to http://regexlib.com/RESilverlight.aspx online regex tester

and use this regex:

(http|ftp|https):\/\/[\w\-_]+(\.[\w\-_]+)+([\w\-\.,@?^=%&amp;:/~\+#]*[\w\-\@?^=%&amp;/~\+#])?

it perfectly highlights the URL in my string. I just can't figure out how to make it work with JavaScript?

javascript

Answer 1

Answer №1

Assuming the input always includes a dash, you can extract everything before the dash using the split method:

var data = split(value);

The desired value will now be stored in the array at index 0.

Answer 2

Assuming the input always includes a dash, you can extract everything before the dash using the split method:

var data = split(value);

The desired value will now be stored in the array at index 0.

Answer 3

Answer №2

Below are two JavaScript functions that can be used:

function extractUrlData1(data) {
var pattern = /^((http|ftp):\/)?\/?([^:\/\s]+)((\/\w+)*\/)([\w\-\.]+\.[^#?\s]+)(#[\w\-]+)?$/;

if (data.match(pattern)) {
    return  {url: RegExp['$&'],
            protocol: RegExp.$2,
            host:RegExp.$3,
            path:RegExp.$4,
            file:RegExp.$6,
            hash:RegExp.$7};
}
else {
    return  {url:"", protocol:"",host:"",path:"",file:"",hash:""};
}
}

function extractUrlData2(data) {
var pattern = /((http|ftp):\/)?\/?([^:\/\s]+)((\/\w+)*\/)([\w\-\.]+\.[^#?\s]+)(#[\w\-]+)?/;

if (data.match(pattern)) {
    return  {url: RegExp['$&'],
            protocol: RegExp.$2,
            host:RegExp.$3,
            path:RegExp.$4,
            file:RegExp.$6,
            hash:RegExp.$7};
}
else {
    return  {url:"", protocol:"",host:"",path:"",file:"",hash:""};
}
}

Source: http://lawrence.ecorp.net/inet/samples/regexp-parse.php

Answer 4

Below are two JavaScript functions that can be used:

function extractUrlData1(data) {
var pattern = /^((http|ftp):\/)?\/?([^:\/\s]+)((\/\w+)*\/)([\w\-\.]+\.[^#?\s]+)(#[\w\-]+)?$/;

if (data.match(pattern)) {
    return  {url: RegExp['$&'],
            protocol: RegExp.$2,
            host:RegExp.$3,
            path:RegExp.$4,
            file:RegExp.$6,
            hash:RegExp.$7};
}
else {
    return  {url:"", protocol:"",host:"",path:"",file:"",hash:""};
}
}

function extractUrlData2(data) {
var pattern = /((http|ftp):\/)?\/?([^:\/\s]+)((\/\w+)*\/)([\w\-\.]+\.[^#?\s]+)(#[\w\-]+)?/;

if (data.match(pattern)) {
    return  {url: RegExp['$&'],
            protocol: RegExp.$2,
            host:RegExp.$3,
            path:RegExp.$4,
            file:RegExp.$6,
            hash:RegExp.$7};
}
else {
    return  {url:"", protocol:"",host:"",path:"",file:"",hash:""};
}
}

Source: http://lawrence.ecorp.net/inet/samples/regexp-parse.php

Answer 5

Answer №3

I found myself doing this in the end

$a.substring($a.indexOf("http:"), $a.indexOf("?"))

I struggle with understanding regular expressions.

Answer 6

I found myself doing this in the end

$a.substring($a.indexOf("http:"), $a.indexOf("?"))

I struggle with understanding regular expressions.

Answer 7

Answer №4

If you use yourFunction.toString().split("'")[1], it will get the job done.

Answer 8

If you use yourFunction.toString().split("'")[1], it will get the job done.

Answer 9

Answer №5

 const linkPattern = /(http?:\/\/[^\s]+)/g;

    const matches = inputValue.match(linkPattern);

    if (matches === null) {

    return "";

    } else {

    const foundLink = matches[0];

    return foundLink;

     }

Answer 10

 const linkPattern = /(http?:\/\/[^\s]+)/g;

    const matches = inputValue.match(linkPattern);

    if (matches === null) {

    return "";

    } else {

    const foundLink = matches[0];

    return foundLink;

     }

Answer 11

Answer №6

Update: I have found an alternative solution to extract the URL:

var clickFunction = 'function onclick(event) { toSocialMedia("http://www.example.com/deal/test-url?2049361208?226781981"); }'
clickFunction.match(/(http:[^"]+)/)[0]

Previous response: Utilize Regular Expressions:

javascript regex to extract anchor text and URL from anchor tags

var linkRegex = /https?:\/\/([-\w\.]+)+(:\d+)?(\/([\w/_\.]*(\?\S+)?)?)?/;

alert(linkRegex.test("http://example.com"));

Answer 12

Update: I have found an alternative solution to extract the URL:

var clickFunction = 'function onclick(event) { toSocialMedia("http://www.example.com/deal/test-url?2049361208?226781981"); }'
clickFunction.match(/(http:[^"]+)/)[0]

Previous response: Utilize Regular Expressions:

javascript regex to extract anchor text and URL from anchor tags

var linkRegex = /https?:\/\/([-\w\.]+)+(:\d+)?(\/([\w/_\.]*(\?\S+)?)?)?/;

alert(linkRegex.test("http://example.com"));

Retrieve a URL from a string using Javascript

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Similar questions

Problem with HTML relative paths when linking script sources

Accessing objects from a loop in JavaScript

What is the best way to design an angular directive or service specifically for straightforward pagination featuring only next and previous options?

Tips for displaying the node's label in Arbor js when hovering over the node

Is there a way to locate the source or URL linked to a button on a form or webpage?

What is the best way to send form data to MongoDB using React?

I'm encountering a typescript error as I migrate a Paho MQTT function from Angular 1 to Angular 2 - what could be causing this issue?

A method for automatically refreshing a webpage once it switches between specific resolutions

Error in Javascript programming | tracking progress bar

The materialLoader in Three.js is experiencing difficulty loading an embedded texture image

Include a class above the specified element; for instance, apply the class "act" to the "<ul>" element preceding the "li.item1"

Exploring the World of JSON Nested Arrays with Unknown Titles and Organizing Them for Storage

Is the execution of promises in Node.js synchronous or asynchronous?

Displaying a subset of categories based on the user's selection

Ways to execute the pdf.js node demonstrations?

Embarking on a New Project with Cutting-Edge Technologies: Angular, Node.js/Express, Webpack, and Types

Enhance jQuery event handling by adding a new event handler to an existing click event

How should one go about creating an npm package out of a vuejs component and testing it locally?

Solving the issue of overflowing in the animation on scroll library

The issue of JQuery Mobile not recognizing HREF links when combined with Javascript