Which way can I use regular expression to capture just a few link attributes

Question

I need a basic example(s) of how I can make a tiny script to pick up only the contents of(s) attribute href.

I’ll simplify the explanation into two groups, it’s them: To and B

In the Group A we have the respective links started with Slash / preceded by the word - mango. Ja para the Group B we have the same setindo, with detail that the word there associated with the code is khaki other than sleeve.

So stay like this:

Group A

<a href='/manga?v=1234567890'>A</a>
<a href='/manga?v=1234567890'>A</a>
<a href='/manga?v=1234567890'>A</a>

etc....

Group B

<a href='/caqui?v=1234567890'>B</a>
<a href='/caqui?v=1234567890'>B</a>
<a href='/caqui?v=1234567890'>B</a>

etc....

How to deal with one of these groups bringing forward on the page only the links referring to the code mango? The rest shall not appear.

Heed! - They all don’t have class and neither id, but have in its attribute identical values if compared to the same group belonging to the same segment. I just want mango.

So come on!

I have made the loop to go through the elements on the tag a, it returns me all links existing on the page. See:

var link = document.getElementsByTagName('a');

for (var i = 0; i < link.length; i++) {

    document.getElementById("resultado").innerHTML+= "<br>"+link[i].getAttribute('href')+"<br>"

}

What I ask here is the junction of link[i].getAttribute('href') with a regular expression

function ExtrairID(url){
    var regExp = /^.*((manga\?))\??v?=?([^#\&\?]*).*/;
    var match = url.match(regExp);
    if ( match && match[7].length == 10 ){
        return match[7];
    }else{
        alert("Não foi possível extrair a ID.");
    }
}

I have already made some attempts on my own, then I ended up getting lost so I decided to come here question. Without more, I wait answer or brief explanation.

Answer 1

An option without using regex, just checking if in href has the floor mango:

var els = document.querySelectorAll("a");
var resultado = '';
for(var x=0; x<els.length; x++){
   var href = els[x].getAttribute("href");
   resultado += href.indexOf("manga") != -1 ? href : '';
}
console.log(resultado);

<a href='/manga?v=1234567890'>A</a>
<a href='/manga?v=1234567890'>A</a>
<a href='/manga?v=1234567890'>A</a>
<a href='/caqui?v=1234567891'>B</a>
<a href='/caqui?v=1234567891'>B</a>
<a href='/caqui?v=1234567891'>B</a>

Or you can use the specific selector without using indexOf:

var els = document.querySelectorAll("a[href*='manga']");
var resultado = '';
for(var x=0; x<els.length; x++){
   resultado += els[x].getAttribute("href");
}
console.log(resultado);

<a href='/manga?v=1234567890'>A</a>
<a href='/manga?v=1234567890'>A</a>
<a href='/manga?v=1234567890'>A</a>
<a href='/caqui?v=1234567891'>B</a>
<a href='/caqui?v=1234567891'>B</a>
<a href='/caqui?v=1234567891'>B</a>

Answer 2

First does the test to check whether in the URL contains /manga

• \d Digits only
• {10} Limit of 10 digits

var LINKS = document.querySelectorAll('a');
var RESULTADO = document.querySelector('#resultado');

function extrair(url) {
  // Verifica se contém '/manga'
  if (/\/manga/.test(url)) {
    RESULTADO.innerHTML += /\d{10}/g.exec(url) + "<br>";
  }
}

for (var i = 0; i < LINKS.length; i++) {
  extrair(LINKS[i].getAttribute('href'));
}

<h3>Grupo A e B</h3>
<a href='/manga?v=4533567894'>A</a>
<a href='/caqui?v=1234567490'>B</a>
<a href='/manga?v=7634567890'>A</a>
<a href='/caqui?v=1234567888'>B</a>
<a href='/manga?v=2345567899'>A</a>
<a href='/caqui?v=1234567234'>B</a>

<h3>Resultado da Expressão Regular - Grupo A</h3>
<div id="resultado"></div>

Ecmascript 5

let LINKS = document.querySelectorAll('a');
let RESULTADO = document.querySelector('#resultado');

const extrair = (url) => {
  // Verifica se contém '/manga'
  if (/\/manga/.test(url)) {
    RESULTADO.innerHTML += /\d{10}/g.exec(url) + "<br>";
  }
}

LINKS.forEach((link) => {
  extrair(link.getAttribute('href'));
});

<h3>Grupo A e B</h3>
<a href='/manga?v=4533567894'>A</a>
<a href='/caqui?v=1234567490'>B</a>
<a href='/manga?v=7634567890'>A</a>
<a href='/caqui?v=1234567888'>B</a>
<a href='/manga?v=2345567899'>A</a>
<a href='/caqui?v=1234567234'>B</a>

<h3>Resultado da Expressão Regular - Grupo A</h3>
<div id="resultado"></div>

Obs.: I believe that act more simple, I am still learning, doubts, suggestions, can comment.

Answer 3

You can easily get all links with a href that starts with /manga with the CSS selector:

a[href^='/manga']

Using Document.querySelectorAll():

links = document.querySelectorAll("a[href^='/manga']");

In addition, all the Htmlanchorelement (as <a>) have the property .search which returns the query string (from the ? onward).

Then use this regex to get the value of the parameter v:

[?&]v=(\d+)

Code:

var links = document.querySelectorAll("a[href^='/manga']"),
    x,
    re = /[?&]v=(\d+)/,
    m;

for (x of links) {
    if (m = re.exec(x.search)) {
        console.log(m[1]);
    }
}

Grupo A e B:
<a href='/manga?v=1234567890'>A</a>
<a href='/manga?v=1234567891'>A</a>
<a href='/caqui?v=1234567892'>B</a>
<a href='/caqui?v=1234567893'>B</a>
<a href='/manga?v=1234567894'>A</a>
<a href='/caqui?v=1234567895'>B</a>

Answer 4

In place of match[7] use match[3]

entree: ExtrairID("aaaa/manga?v=1234567890")

function ExtrairID(url){
    var regExp = /^.*((manga\?))\??v?=?([^#\&\?]*).*/;
    var match = url.match(regExp);
    console.log(match);
    if ( match && match[3].length == 10 ){
        return match[3];
    }else{
        alert("Não foi possível extrair a ID.");
    }
}

match result:

["/manga?v=1234567890", "/manga?", "/manga?", "1234567890", index: 0, input: "/manga?v=1234567890"]
0 : "/manga?v=1234567890"
1 : "/manga?"
2 : "/manga?"
3 : "1234567890"
index : 0
input : "/manga?v=1234567890"

Return 1234567890

Edit:

var link = document.getElementsByTagName('a');
for (var i = 0; i < link.length; i++) { 
  ExtrairID(link[i].getAttribute('href')) 
}