How can I get a value from an URL?

Question

Asuming I have something like

var url = 'http://stackoverflow.com/questions/24a34b83c72/js-regex-get-values-between-two-characters'

How could I get the 24a34b83c72 ID using pure javascript? I know that it's always after the questions/ part and that regardless if it contains a number or symbol, it needs to end before the next /. I tried things like;

url.substring(url.lastIndexOf('questions/'))

But that resulted in the entire thread after it. I tried regular expresions but the closest I got to is:

var regex = /"details\/"[a-zA-Z0-9]+"\/"/

Can anyone help me?

`var result = url.match(/questions\/(.+?)\//)` will perform a regex match which has the desired output as a matched group. After checking that the match succeeded, you could extract the output with `result[1]`. — Joe F, Apr 07 '16 at 23:13
Maybe better split string by slash / and get array. Key before id exist as id. Dorry for my english — Naumov, Apr 07 '16 at 23:22
@Naumov - you're suggestion is already posted as an answer - you can express your support for it by voting :-) — Amit, Apr 07 '16 at 23:26

score 2 · Accepted Answer · answered Apr 07 '16 at 23:13

You could group everything after questions/ and before the next /, like so:

url.match(/questions\/([^/]+)/)[1]

You can see the output of url.match(..) is this:

["questions/24a34b83c72", "24a34b83c72"]

The second item is there because of the parenthesis around [^/]+, so you access it with url.match(..)[1].

Amit · Answer 2 · 2016-04-07T23:27:59.700

2

Regular expressions are useful for more complex patterns, or repeated matches. Your requirements are simple and singular.

Split the string by '/', find the index of 'questions', the result is in the next index:

var parts = url.split('/');
var result = parts[parts.indexOf('questions') + 1];

edited Apr 07 '16 at 23:27

answered Apr 07 '16 at 23:20

Amit

45,440
9
78
110

score 1 · Answer 3 · answered Apr 07 '16 at 23:16

1

If you insist in regexp:

questions\/([0-9A-Za-z]+?)\/

https://regex101.com/r/dE1oC7/1

That should match the string provided as example.

answered Apr 07 '16 at 23:16

Dan H

3,524
3
35
46

score 0 · Answer 4 · answered Apr 07 '16 at 23:23

This worked for me, with your example on the Firefox console:

    >> var url = 'http://stackoverflow.com/questions/24a34b83c72/js-regex-   get-values-between-two-characters'
    >> var regex = /questions\/([a-zA-Z0-9]+)\//
    >> regex.exec(url)

    Array [ "questions/24a34b83c72/", "24a34b83c72" ]

The second element of the array should be what you are looking for.

score 0 · Answer 5 · 2016-04-08T00:57:39.713

[Another option]

I'd interpret the URL string first and after interpret what the interpretation returns for me (as a Abtract syntax tree). The following commands block will eat the url string while the below loop is executing (or interpreting), constructing a representative array in steps!

var curChar,
    directoryPassed,//not yet
    expectGetValue,
    getContent="",
    getStarted,//? not started ($_GET)
    inPort,//not reading port
    portRead,//port not read yet
    state=0,//first state
    text="",
    urlTree=[];
for(;;){
    curChar=url.charAt(0);//first char
    if(state===0){
        //expects http... ws... file or https, for example.
        if(curChar===""){
            throw new Error("http:// expected.")
        }else if(curChar===":"){
            if(directoryPassed){
                throw new Error("Unexpected token.")
            }
            urlTree.push({type:"URLProtocol",value:text});
            text="";
            state=1
        }else{
            text+=curChar
        }
    }else if(state===1){
        //expects //...
        if(url.substring(0,2)==="//"){
            state=2;
            url=url.substring(1)
        }else if(curChar===""){
            throw new Error("// expected.")
        }
    }else{
        //expects anything correct: site.com/dir, localhost:8080, ?get=0, etc.
        if(getStarted){
            if(curChar==="="){
                if(text.length===0){
                    throw new Error("Unexpected token.")
                }else{
                    expectGetValue=true;
                    getContent=""
                }
            }else if(curChar==="&"){
                if(expectGetValue||text.length!==0)
                    urlTree.push({type:"Variable",name:text,value: (getContent||true) });
                expectGetValue=false;
                text=""
            }else if(curChar===""){
                if(expectGetValue||text.length!==0)
                    urlTree.push({type:"Variable",name:text,value: (getContent||true) });
                break
            }else{
                if(expectGetValue){
                    getContent+=curChar
                }else{
                    text+=curChar
                }
            }
        }else if(curChar==="."){
            if(text.length===0){
                throw new Error("Unexpected token.")
            }else{
                if(inPort){
                    throw new Error("Unexpected token in port.")
                }else{
                    urlTree.push({type:"Name",value:text});
                    text=""
                }
            }
        }else if(curChar===""){
            if(text.length!==0){
                if(inPort){
                    urlTree.push({type:"Port",value:text})
                }else{
                    urlTree.push({type:"Name",value:text})
                }
                text=""
            }else if(inPort){
                throw new Error("Port not specified.")
            }
            break
        }else if(curChar==="?"){
            //$_GET starts here.
            if(text.length!==0){
                if(inPort){
                    urlTree.push({type:"Port",value:text})
                }else{
                    urlTree.push({type:"Name",value:text})
                }
                text=""
            }
            getStarted=true;
            urlTree.push({type:"Get"})
        }else if(curChar==="/"){
            if(text.length===0){
                throw new Error("Unexpected token.")
            }else{
                directoryPassed=true;
                if(inPort){
                    inPort=false;
                    urlTree.push({type:"Port",value:text})
                }else{
                    urlTree.push({type:"Name",value:text})
                }
                text="";
                urlTree.push({type:"NextDirectory"})
                //New directory!
            }
        }else if(curChar===":"){
if(portRead||text.length===0){
                throw new Error("Unexpected token.")
            }else{
                urlTree.push({type:"Text",value:text});
                text="";
                inPort=
                portRead=true;
                //Now the port will never be defined again.
            }
        }else if(inPort){
            if(/[0-9]/.test(curChar)){
                text+=curChar
            }else{
                throw new Error("Invalid port token.")
            }
        }else{
            text+=curChar
        }
    }
    url=url.substring(1)
}

Once it's ran, you get the urlTree array constructed with base in the url string. Additionaly, your URL currently returns the following tree in a array:

in the code. Every item from tree array is a object. Every object has the property type. type tolds what the item represents.

In this parsing, there are these types (in string):

"URLProtocol" -> It maybe http, https or anything else. Has the property: value (protocol string, as: "http", "ws", etc)

"Name" -> It's name of something. Example: name.name... name.com... ?name=0; Has the property: value (name string)

"NextDirectory" -> Represents "/" - "A new directory opened"

"Get" - > ? started. "Now URL variables maybe declared"

"Variable" -> represents ? variable. Has the properties: name and value;

Basic. That's all. Then you may interpret the array with a numeric loop with your own instructions.

How can I get a value from an URL?

5 Answers5