javascript regex pour extraire le texte d'ancrage et URL de balises d'ancrage

Question

J'ai un paragraphe de texte dans une variable javascript appelé « input_content » et que le texte contient plusieurs balises d'ancrage / liens. Je voudrais correspondre toutes les balises d'ancrage et extraire le texte d'ancrage et URL, et le mettre dans un tableau comme (ou similaire à) ceci:

Array
(
    [0] => Array
        (
            [0] => <a href="http://yahoo.com">Yahoo</a>
            [1] => http://yahoo.com
            [2] => Yahoo
        )
    [1] => Array
        (
            [0] => <a href="http://google.com">Google</a>
            [1] => http://google.com
            [2] => Google
        )
)

J'ai pris une fissure à elle ( http://pastie.org/339755 ), mais je suis perplexe au-delà de ce point. Merci pour l'aide!

Answer 1

var matches = [];

input_content.replace(/[^<]*(<a href="([^"]+)">([^<]+)<\/a>)/g, function () {
    matches.push(Array.prototype.slice.call(arguments, 1, 4))
});

Cela suppose que vos points d'ancrage seront toujours sous la forme à-dire qu'il sera <a href="...">...</a> ne fonctionnera pas s'il y a d'autres attributs (par exemple, target). L'expression régulière peut être amélioré pour accueillir ce sujet.

Pour décomposer l'expression régulière:

/ -> start regular expression
  [^<]* -> skip all characters until the first <
  ( -> start capturing first token
    <a href=" -> capture first bit of anchor
    ( -> start capturing second token
        [^"]+ -> capture all characters until a "
    ) -> end capturing second token
    "> -> capture more of the anchor
    ( -> start capturing third token
        [^<]+ -> capture all characters until a <
    ) -> end capturing third token
    <\/a> -> capture last bit of anchor
  ) -> end capturing first token
/g -> end regular expression, add global flag to match all anchors in string

Chaque appel à notre fonction anonyme recevra trois jetons que les deuxième, troisième et quatrième arguments, à savoir les arguments [1], arguments [2], arguments [3]:

• arguments [1] est l'ancre ensemble
• arguments [2] est la partie href
• arguments [3] est le texte à l'intérieur

Nous allons utiliser un hack pour pousser ces trois arguments comme un nouveau tableau dans notre réseau principal matches. La arguments variable intégrée est pas un vrai tableau JavaScript, nous allons donc appliquer la méthode Array sur split pour extraire les éléments que nous voulons:

Array.prototype.slice.call(arguments, 1, 4)

Cela va extraire les lots de <=> à partir de l'index 1 et se terminant (non inclus) à l'index 4.

var input_content = "blah \
    <a href=\"http://yahoo.com\">Yahoo</a> \
    blah \
    <a href=\"http://google.com\">Google</a> \
    blah";

var matches = [];

input_content.replace(/[^<]*(<a href="([^"]+)">([^<]+)<\/a>)/g, function () {
    matches.push(Array.prototype.slice.call(arguments, 1, 4));
});

alert(matches.join("\n"));

donne:

<a href="http://yahoo.com">Yahoo</a>,http://yahoo.com,Yahoo
<a href="http://google.com">Google</a>,http://google.com,Google

Answer 2

Puisque vous utilisez probablement le javascript dans un navigateur web, regex semble être une mauvaise idée pour cela. Si le paragraphe est venu de la page en premier lieu, obtenir une poignée pour le conteneur, appelez pour obtenir les .getElementsByTagName() points d'ancrage, puis extraire les valeurs que vous voulez de cette façon.

Si ce n'est pas possible, alors créer un nouvel objet élément HTML, attribuez votre texte à sa propriété .innerHTML, puis appelez <=>.

Answer 3

Je pense que Joel a le droit de celui-ci - regexes sont connus pour jouer mal avec un balisage, car il y a tout simplement trop de possibilités à envisager. Y at-il d'autres attributs des balises d'ancrage? Dans quel ordre sont-ils? Le séparant des espaces toujours un seul espace? Voyant que vous avez déjà HTML d'analyseur d'un navigateur disponible, mieux pour mettre cela au travail au lieu.

function getLinks(html) {
    var container = document.createElement("p");
    container.innerHTML = html;

    var anchors = container.getElementsByTagName("a");
    var list = [];

    for (var i = 0; i < anchors.length; i++) {
        var href = anchors[i].href;
        var text = anchors[i].textContent;

        if (text === undefined) text = anchors[i].innerText;

        list.push(['<a href="' + href + '">' + text + '</a>', href, text];
    }

    return list;
}

retourne un tableau comme celui que vous décrivez indépendamment de la façon les liens sont stockés. Notez que vous pouvez changer la fonction de travailler avec un élément passé au lieu de texte en changeant le nom du paramètre « conteneur » et enlever les deux premières lignes. La propriété textContent / innerText obtient le texte affiché pour le lien, dépouillé de toutes les balises (gras / italique / police / ...). Vous pouvez remplacer .textContent avec .innerHTML et retirer la déclaration intérieure si () si vous souhaitez conserver le balisage.

Answer 4

Je pense que JQuery serait votre meilleur pari. Ce n'est pas le meilleur scénario et je suis sûr que d'autres peuvent donner quelque chose de mieux. Mais cela crée un tableau exactement ce que vous cherchez.

<script type="text/javascript">
    // From http://brandonaaron.net Thanks!
    jQuery.fn.outerHTML = function() {
        return $('<div>').append( this.eq(0).clone() ).html();
    };    

    var items = new Array();
    var i = 0;

    $(document).ready(function(){
        $("a").each(function(){
            items[i] = {el:$(this).outerHTML(),href:this.href,text:this.text};
            i++;      
        });
    });

    function showItems(){
        alert(items);
    }

</script>

Answer 5

Pour extraire l'URL:

motif var = /.href="(.)".*/; var url = String.replace (motif, '$ 1');

Démo:

//var string = '<a id="btn" target="_blank" class="button" href="https://yourdomainame.com:4089?param=751&amp;2ndparam=2345">Buy Now</a>;'
//uncomment the above as an example of link.outerHTML

var string = link.outerHTML
var pattern = /.*href="(.*)".*/;
var href = string.replace(pattern,'$1');
alert(href)

Pour « texte d'ancre », pourquoi ne pas utiliser: link.innerHtml

Answer 6

Pour le bénéfice des chercheurs: j'ai créé quelque chose qui fonctionne avec des attributs supplémentaires dans la balise d'ancrage. Pour ceux qui ne connaissent Regex, les valeurs dollar (1 $) sont ETC. les matches de groupe regex.

var text = 'This is my <a target="_blank" href="www.google.co.uk">link</a> Text';
var urlPattern = /([^+>]*)[^<]*(<a [^>]*(href="([^>^\"]*)")[^>]*>)([^<]+)(<\/a>)/gi;
var output = text.replace(urlPattern, "$1___$2___$3___$4___$5___$6");
alert(output);

jsFiddle et regex101 .

Vous pouvez obtenir des informations sur des groupes comme celui-ci:

var returnText = text.replace(urlPattern, function(fullText, beforeLink, anchorContent, href, lnkUrl, linkText, endAnchor){
                    return "The bits you want e.g. linkText";
                });