1
votes

Obtenir la liste href sous le contenu HTML

J'ai une chaîne json qui contient un élément HTML. Ce que j'essaie de réaliser est de récupérer toute la valeur de balise d'ancrage dans cette chaîne.

Json String

"content": "

Informations de référence

    Mon URL  
   Votre URL  
 
"

Voici le format HTML

content.match(/href="([^"]*?)"/);

J'ai essayé comme ça mais je n'arrive pas à obtenir la valeur exacte:

<a href="https://myurl.com">My Url</a>

J'obtiens cette valeur

 <div id="TestDiv" hidden >
   </div>

 let anchor = document.getElementById("TestDiv").getElementsByTagName("li");
 anchor[0].innerHTML

Mais je veux obtenir https://myurl.com

une autre façon que j'ai essayée qui a été fermée bien que cela pose toujours un problème mais je ne veux pas utiliser regex:

<p>Reference information</p>
<ul>
<li><a href="https://myurl.com">My Url</a></li>
<li><a href="https://yoururl.com">Your Url</a></li>
</ul>

Comment puis-je y parvenir?

javascript reactjs

0 commentaires

3 Réponses :

0
votes

Vous pouvez accéder à la valeur de l'attribut href en utilisant .href ou en utilisant la méthode getAttribute ("href"). Cependant, vous obtenez actuellement les éléments li, mais vous voulez à la place obtenir les éléments d'ancrage.

var i;
for (i = 0; i < anchor.length; i++) {
  anchor[i].href;
}

Pour obtenir tous les href, vous devrez parcourir le tableau d'ancres. P >

let anchor = document.getElementById("TestDiv").getElementsByTagName("a");

anchor[0].href;

4 commentaires

Mais je ne peux pas obtenir la valeur exacte, revoyons

Je ne suis pas en train de suivre, si l'ancre [0] vous donne un élément valide, pourquoi cela ne fonctionne-t-il pas?

Obtenir undefined pour anchor [0] .href avez-vous testé cela? Si oui, veuillez mettre à jour la réponse avec une solution complète.

désolé, je viens de réaliser que vous obtenez le li pas le a. Mettra à jour la réponse maintenant.

2
votes

// Create an element
const el = document.createElement("div");

// set the inner HTML
el.innerHTML = `
<p>Reference information</p>
<ul>
  <li><a href="https://myurl.com">My Url</a></li>
  <li><a href="https://yoururl.com">Your Url</a></li>
</ul>
`;

// grab all <a> tag
const nodeList = el.querySelectorAll("a");

// convert to array
const nodeArray = [...nodeList];

// map to href
const hrefs = nodeArray.map((a) => a.href); // ["https://myurl.com/", "https://yoururl.com/"]

1 commentaires

C'est la solution que je recherche, excellente façon dont vous l'avez montré. à votre santé.

0
votes

Vous pouvez utiliser Array.prototype.map comme:

var anchorUrls = Array.prototype.map.call(
    document.anchors, (i) => i.href;
);
console.log(anchorUrls);

0 commentaires