regex javascript per estrarre il testo di ancoraggio e l'URL dal tag di ancoraggio

Question

Ho un paragrafo di testo in una variabile javascript denominata 'input_content' e che il testo contiene più tag di ancoraggio / link. Vorrei abbinare tutti i tag di ancoraggio e di estrarre il testo di ancoraggio e l'URL, e metterlo in un array come (o simili a) questo:

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

Ho preso una crepa in esso ( http://pastie.org/339755 ), ma sto perplesso oltre questo punto. Grazie per l'aiuto!

Answer 1

var matches = [];

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

Questo presuppone che le ancore saranno sempre in forma <a href="...">...</a> cioè non funzionerà se ci sono altri attributi (per esempio, target). L'espressione regolare può essere migliorata per ospitare questo.

Per abbattere l'espressione regolare:

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

Ogni chiamata alla nostra funzione anonima riceverà tre gettoni come secondo, terzo e quarto argomento, ovvero argomenti [1], argomenti [2], argomenti [3]:

• argomenti [1] è l'intero ancoraggio
• argomenti [2] è la parte href
• argomenti [3] è il testo all'interno

Lo useremo un trucco per spingere questi tre argomenti, come un nuovo array nella nostra principale gamma matches. Il arguments variabile incorporata non è un vero array JavaScript, quindi dovremo applicare il metodo di split Array su di esso per estrarre gli elementi che vogliamo:

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

In questo modo estrarre elementi dal <=> a partire dall'indice 1 e termina (non incluso) con indice 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"));

si ottiene:

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

Answer 2

Dal momento che si sta presumibilmente in esecuzione il codice JavaScript in un browser Web, regex sembra una cattiva idea per questo. Se il paragrafo è venuto dalla pagina, in primo luogo, ottenere una maniglia per il contenitore, chiamare .getElementsByTagName() per ottenere le ancore, e quindi estrarre i valori che si desidera in questo modo.

Se questo non è possibile quindi creare un nuovo oggetto elemento HTML, assegnare il testo alla sua proprietà .innerHTML, e quindi chiamare <=>.

Answer 3

Penso che Joel ha il diritto di esso - regex sono noti per giocare male con markup, in quanto vi sono semplicemente troppe possibilità da prendere in considerazione. Ci sono altri attributi al tag di ancoraggio? Quale ordine sono essi a? È lo spazio bianco che separa sempre un unico spazio? Visto che hai già HTML del browser parser a disposizione, meglio mettere che a lavorare invece.

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

Ciò restituirà un array come quello che lei descrive indipendentemente da come i collegamenti sono memorizzati. Si noti che è possibile modificare la funzione di lavorare con un elemento passato al posto del testo, modificando il nome del parametro di "contenitore" e rimuovendo le prime due righe. La proprietà textContent / innerText ottiene il testo visualizzato per il link, spogliato di qualsiasi markup (grassetto / corsivo / font / ...). È possibile sostituire .textContent con .innerHTML e rimuovere l'istruzione interna, se () se si desidera conservare il markup.

Answer 4

JQuery sarebbe la soluzione migliore. Questo non è lo script migliore e sono sicuro che gli altri possono dare qualcosa di meglio. Ma questo crea un array di esattamente quello che stai cercando.

<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

Per estrarre l'url:

var pattern = /.href="(.)".*/; var url = String.Replace (modello, '$ 1');

Demo:

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

Per "anchor text", perché non usare: link.innerHtml

Answer 6

A beneficio dei ricercatori: ho creato qualcosa che funziona con gli attributi aggiuntivi nel tag di ancoraggio. Per chi non ha familiarità con Regex, il dollaro valori ($ 1, ecc) sono il gruppo 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 e regex101 .

In alternativa, è possibile ottenere informazioni dai gruppi di questo tipo:

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