Get only URL "href" from string

Question

Suppose I have a String in my DB like this:

<a class=' text-info' href='description/Q0RFU0NJRDM=/Acetaminophen (Tylenol) Poisoning'&#47;>Acetaminophen (Tylenol) Poisoning<a &#47;>

<a class=' text-info' href='description/Q0RFU0NJRDQ=/Achalasia'&#47;>Achalasia<a &#47;>

How can I get only URL part in these strings through Javascript?

The output should be:

description/Q0RFU0NJRDQ=/Achalasia 

description/Q0RFU0NJRDM=/Acetaminophen (Tylenol) Poisoning

@Clonkex Why not? I don't feel like explaining my post so wouldn't qualify as a good answer hence it being posted as a comment. This is also the first time I have seen anyone complain for putting a quick simple solution posted in the comments especially since this question is a duplicate... Would you rather me mark it as a duplicate since your answer is also a match of an existing one? Update: *"Comment removed & question flagged as duplicate"* fine by me. — NewToJS, May 23 '17 at 06:26
Possible duplicate of [JS Regex to find href of several a tags](https://stackoverflow.com/questions/13802334/js-regex-to-find-href-of-several-a-tags) — NewToJS, May 23 '17 at 06:30
@NewToJS I deleted my comments if you wish to do the same :) — Clonkex, May 23 '17 at 06:34
@Mohamed-Ted its string that is why i have written it in bold — Aman, May 23 '17 at 07:19
@doe CyberAbhay's answer seem to work. He has taken the HTML as string — Jins Peter, May 23 '17 at 07:27

Nadir Laskar · Answer 1 · 2017-05-23T06:28:46.110

1

You can get the urls as follows: Firstly, you store the anchors in an array

urls  = ["<a class=' text-info' href='description/Q0RFU0NJRDM=/Acetaminophen (Tylenol) Poisoning'&#47;>Acetaminophen (Tylenol) Poisoning<a &#47;>",
"<a class=' text-info' href='description/Q0RFU0NJRDQ=/Achalasia'&#47;>Achalasia<a &#47;>"];

Now, using map method of array

var _urls = urls.map(function(url){
   var div = document.createElement('div');
   div.innerHTML =  url;
   return div.children[0].getAttribute('href');
});

You can iterate over the array and create a temporary div and add the anchor as innerHTML to get an HTML Element and return the href property of the element.

SNIPPET

urls  = ["<a class=' text-info' href='description/Q0RFU0NJRDM=/Acetaminophen (Tylenol) Poisoning'&#47;>Acetaminophen (Tylenol) Poisoning<a &#47;>",
"<a class=' text-info' href='description/Q0RFU0NJRDQ=/Achalasia'&#47;>Achalasia<a &#47;>"];

var _urls = urls.map(function(url){
   var div = document.createElement('div');
   div.innerHTML =  url;
   return div.children[0].getAttribute('href');
});

console.log(_urls);

edited May 23 '17 at 06:28

answered May 23 '17 at 06:24

Nadir Laskar

4,012
2
16
33

That could risk something being injected if the strings are not sanitized when saved. – TedMeftah May 23 '17 at 06:27
I suppose the strings are sanitized before storing in DB. – Nadir Laskar May 23 '17 at 06:32
1

@Mohamed-Ted Further the node is not appended in DOM its just created on memory just to get the href property. – Nadir Laskar May 23 '17 at 06:33
That's true, I was just mentioning that it can be potentially risky – TedMeftah May 23 '17 at 06:40

ardilgulez · Answer 2 · 2017-05-23T06:16:17.153

If those were in an HTML page:

var aList = document.querySelectorAll("a");
var aArray = Array.prototype.slice(aList, 0);
aArray.forEach(function(aElement){
    console.log(aElement.getAttribute('href'));
});

Oh you don't have those in an HTML page. So you can basically do string manipulation:

databaseResults.forEach(function(databaseResult){
    var hrefValue = databaseResult.split(" ").filter(function(item){ return item.startsWith("href"); }).split("=")
    return hrefValue.substring(1, hrefValue.length - 1);
});

score 0 · Answer 3 · answered May 23 '17 at 06:15

Just use a simple regex like so:

var theString = "<a class=' text-info' href='description/Q0RFU0NJRDM=/Acetaminophen (Tylenol) Poisoning'&#47;>Acetaminophen (Tylenol) Poisoning<a &#47;>";
var exp = /href='(.+)'/g;
var match = exp.exec(theString);
console.log(match[0]); //outputs: description/Q0RFU0NJRDM=/Acetaminophen (Tylenol) Poisoning

Pankaj Shukla · Answer 4 · 2017-05-23T06:30:40.260

0

You can do this: Here coll is non-live collection for DOM elements and is an array like structure over which you can iterate.

var coll = document.querySelectorAll('.text-info');
    console.log(coll.length);
    for(var i=0;i<coll.length;i++) {
        console.log(coll[i].getAttribute('href'));
    }

<a class=' text-info' href='description/Q0RFU0NJRDM=/Acetaminophen (Tylenol) Poisoning'&#47;>Acetaminophen (Tylenol) Poisoning<a &#47;>

<a class=' text-info' href='description/Q0RFU0NJRDQ=/Achalasia'&#47;>Achalasia<a &#47;>

edited May 23 '17 at 06:30

answered May 23 '17 at 06:15

Pankaj Shukla

2,657
2
11
18

He said they were strings in a DB; your answer assumes they are in the DOM. – Clonkex May 23 '17 at 06:15
@Clonkex If that is the case, how is your solution going to help? Shouldn't then a query be written instead of `console.log` in your solution? I have asked him the question though! Question is not very clear. – Pankaj Shukla May 23 '17 at 06:21
My solution assumes he knows how to get the data out of the DB but not how to extract the substring from the string. My use of `console.log()` is to demonstrate how to use resulting variable, and is quite common. – Clonkex May 23 '17 at 06:24
@Clonkex Yeah, assumption! It is entirely possible that he has these tags in DB, reads them on server side and sends back as html to the browser. Possible? – Pankaj Shukla May 23 '17 at 06:26
Well he didn't specify. You're _assuming_ he has them in the DOM with your answer. It's normal to assume. It's also all we can do since he didn't tell us one way or the other. Personally I think it's obvious that he means he simply wants to get the `href` part out of a normal string, but if I'm wrong he will correct me. – Clonkex May 23 '17 at 06:27
@Clonkex Yeah same with me. Please have patience when you also made an assumption and don't be quick to judge other's solution. – Pankaj Shukla May 23 '17 at 06:29
I feel it's fair that I assumed to be correct, when that's what he actually _said_. For your answer to be correct he would have had to leave out fairly important information and mean something other than what he said. But my intention was not to judge, only to point out that I thought you may have mis-read the question, so apologies if I came across as judgmental. – Clonkex May 23 '17 at 06:32
1

@Clonkex No worries! I also didn't mean that you apologize to me. I just wanted both of us to wait for clarification since we both agree that the problem is poorly structured. By the way it's unusual to the best of my knowledge that one keeps these tags in DB. So my assumption(which I thought was fair) was to think it is in DOM. :) – Pankaj Shukla May 23 '17 at 06:39

TedMeftah · Answer 5 · 2017-05-23T06:25:02.640

From the question it's not really clear whether the input is string of a or dom elements:

in case they are strings we can use a simple RegEx: /href=(["|'])(.*)\1/, that will capture anything between ' or " after a href=.

var strings = [
`<a class=' text-info' href='description/Q0RFU0NJRDM=/Acetaminophen (Tylenol) Poisoning'&#47;>Acetaminophen (Tylenol) Poisoning<a &#47;>`,
`<a class=' text-info' href='description/Q0RFU0NJRDQ=/Achalasia'&#47;>Achalasia<a &#47;>`
]

var urls = strings.map(s=>{
  return /href=(["|'])(.*)\1/.exec(s)[2];
})

console.log(urls)

CyberAbhay · Answer 6 · 2017-05-23T06:52:28.117

0

Here is you answer which will give you only url from your anchor-tag HTMl

var data = '<a class="text-info" href="description/Q0RFU0NJRDM=/Acetaminophen (Tylenol) Poisoning"&#47;>Acetaminophen (Tylenol) Poisoning<a &#47;>';

var subString = 'href="';
var endString = '>';
var index =1;
function substringcheck(data,subString,endString,index){
var urlstart =  data.split(subString, index).join(subString).length;
var urlend = data.split(endString, index).join(endString).length;

var res = data.substring(urlstart+6,urlend-6);
return res;
}

var result = substringcheck(data, subString,endString, index);
console.log(result);

edited May 23 '17 at 06:52

answered May 23 '17 at 06:22

CyberAbhay

494
6
17

I think this is not what he wanted. In your example the string is already the part he wanted. The OP wanted to know how to extract that part (i.e. `description/Q0RFU0NJRDM=/Acetaminophen (Tylenol) Poisoning`) from the original string (i.e. `Acetaminophen (Tylenol) Poisoning `). – Clonkex May 23 '17 at 06:25
1

@Clonkex i have updated my code to take anchor tag HTML as input and give desired output – CyberAbhay May 23 '17 at 06:55
Nice, looking better now. I think the OP is spoiled for choice :P – Clonkex May 23 '17 at 10:48

Get only URL "href" from string

6 Answers6