URL extraction from String in Javascript

Question

I'm getting raw HTML data back from a service, and need to extract a URL from the string. Specifically there is a section of the HTML where the URL string exists, and it is a parameter called 'data-url'. Is there a way I can extract just the URL immediately following 'data-url'. Here's an example:

let html_str = '<div class="tv-focusable" id="tv_web_answer_source" tabindex="-1" data-url="https://apple.stackexchange.com/questions/323174/does-the-iphone-8-have-any-sort-of-water-resistance-or-waterproof-manufacturing" onclick="onUrlClick(this)">'

I just need to strip out the domain and store it.

@HereticMonkey -_-, OP means extract url as a string from html text that is in string form rather than html form. — nick zoum
– nick zoum, Commented Feb 7, 2019 at 14:57
The structure will not be known so I have no way of knowing where the data-url value will be. — Lee Probert
– Lee Probert, Commented Feb 7, 2019 at 14:57
It was not very clear until the edit that they were getting a string. There are other questions asking similar questions, like How to get html tag attribute values using JavaScript Regular Expressions?, but unfortunately they are focused on regex, so I won't mark as dupe... :) — Heretic Monkey
– Heretic Monkey, Commented Feb 7, 2019 at 15:03

nick zoum · Accepted Answer · 2019-02-07 15:06:16Z

3

You can create a URL object from a string using new URL(text) and get the hostname of that Object. Only thing that remains is choosing how you will extract the url from the html.

Using regex

var html = '<div class="tv-focusable" id="tv_web_answer_source" tabindex="-1" data-url="https://apple.stackexchange.com/questions/323174/does-the-iphone-8-have-any-sort-of-water-resistance-or-waterproof-manufacturing" onclick="onUrlClick(this)">';

console.log(new URL(html.match(/data-url="([^"]*)"/)[1]).hostname);

Using html

var html = '<div class="tv-focusable" id="tv_web_answer_source" tabindex="-1" data-url="https://apple.stackexchange.com/questions/323174/does-the-iphone-8-have-any-sort-of-water-resistance-or-waterproof-manufacturing" onclick="onUrlClick(this)">';

var element = document.createElement("div");
element.innerHTML = html;
var elementWithData = element.querySelector("[data-url]");
if (elementWithData) {
  console.log(new URL(elementWithData.getAttribute("data-url")).hostname);
}

I would personally go with the html solution, since if (for unknown reasons) the url contains this text \", then the regex will fail (though you could just add that constraint).

Also, if you want ES5 compatibility you should use getAttribute over dataset. But this will only matter when using older versions of IE (up to 11)

edited Feb 7, 2019 at 15:06

answered Feb 7, 2019 at 14:36

nick zoum

6,6538 gold badges43 silver badges93 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Arthur Over a year ago

You don't need to push the html into you document DOM to use it as JS. You can create DOM element out of document

nick zoum Over a year ago

@Arthur I am creating a DOMElement from the document object. Then I am setting the innerHtml. This way is safer as it will work with htmlText containing more than 1 starting elements.

Arthur Over a year ago

Okok, I was thinking what document.createElement() was pushing the new element on it. But it don't. So my previous comment are no need to be.

Lee Probert Over a year ago

One issue here is that my code is a Node server so there is no Document object.

nick zoum Over a year ago

@LeeProbert In that case you can use the regexp solution which will work for every well formed url. Or you can use a node library like jsdom to convert the text to html

|

epascarello · Accepted Answer · 2019-02-07 14:39:43Z

2

Easiest thing would be to use the DOM to get the information. Set your string of html to a new element, select it, and use dataset to get the value of the attribute.

var div = document.createElement("div")
div.innerHTML = `<div class="tv-focusable" id="tv_web_answer_source" tabindex="-1" data-url="https://apple.stackexchange.com/questions/323174/does-the-iphone-8-have-any-sort-of-water-resistance-or-waterproof-manufacturing" onclick="onUrlClick(this)"></div>`
var str = div.querySelector('[data-url]').dataset.url
var host = new URL(str).hostname
console.log(host, str)

answered Feb 7, 2019 at 14:39

epascarello

208k20 gold badges206 silver badges246 bronze badges

Comments

Arthur · Accepted Answer · 2019-02-07 14:49:25Z

2

Just use getAttribute

document.getElementById('tv_web_answer_source').getAttribute('data-url')

Even better, use the dataset (because the attribute you want start with data-)

document.getElementById('tv_web_answer_source').dataset.url

https://developer.mozilla.org/fr/docs/Web/API/HTMLElement/dataset

edited Feb 7, 2019 at 14:49

answered Feb 7, 2019 at 14:34

Arthur

5,1783 gold badges37 silver badges65 bronze badges

3 Comments

Arthur Over a year ago

Updated to handle your comment @epascarello

nick zoum Over a year ago

@Arthur This won't work if the html is of format <div></div><div data-url="..."></div>

Arthur Over a year ago

Please upvote epascarello's and/or nick zoum's answers, they are good. Mine doesn't take account that it's a string and not a DOM element.

Alan · Accepted Answer · 2019-02-07 14:34:16Z

0

Maybe use

url = s.split("data-url=|\" ")[1];

answered Feb 7, 2019 at 14:34

Alan

9769 silver badges30 bronze badges

1 Comment

Arthur Over a year ago

JS have specific function to do this

Collectives™ on Stack Overflow

URL extraction from String in Javascript

4 Answers 4

6 Comments

Comments

3 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

6 Comments

Comments

3 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related