仅从字符串中获取 URL "href"

Question

假设我的数据库中有一个字符串，如下所示：

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

如何通过 Javascript 获取这些字符串中的 URL 部分？

输出应为：

description/Q0RFU0NJRDQ=/Achalasia 
description/Q0RFU0NJRDM=/Acetaminophen (Tylenol) Poisoning

Answer 1

您可以按如下方式获取网址：首先，将锚点存储在数组中

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

您可以遍历数组并创建一个临时div 并将锚点添加为 innerHTML 以获取 HTML 元素并返回该元素的 href 属性。

片段

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

Answer 2

只需使用一个简单的正则表达式，如下所示：

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

Answer 3

如果这些在 HTML 页面中：

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

哦，你在HTML页面中没有这些。所以你基本上可以做字符串操作：

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

Answer 4

从这个问题来看，输入是 a 字符串还是 dom 元素字符串尚不清楚：

如果它们是字符串，我们可以使用简单的正则表达式：/href=(["|'])(.*)1/ ，这将捕获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)

Answer 5

你可以这样做：这里coll是 DOM 元素的非实时集合，是一个类似数组的结构，您可以对其进行迭代。

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

Answer 6

这是您的答案，它只会为您提供来自锚标签 HTMl 的 url

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