modifica contenuto

**KillerWorm** · 05-03-2019, 23:28

il fatto che sia numerico è relativo, domani potrebbero inventarsi delle lettere.

mmmh

allora questo non può essere preso in considerazione?

il criterio è "valorenumerico"

...

il formato delle voce di lista è questo
[...]

mmmmh

c'è qualcosa che non mi torna però.

... tutti gli elementi del listato hanno il codice contratto?

avevo capito che il codice contratto fosse da ricercare tra i vari elementi della lista, non all'interno di ciascuno.

... confuso

Ho iniziato ad abbozzare qualcosa ma evidentemente c'è qualcosa di sbagliato nell'impostazione del markup rispetto a quanto hai indicato ora:

codice:

<!DOCTYPE HTML>
<html lang="it">
   <head>
      <title>Esempio</title>
      <meta charset="utf-8">
      <script>
      
         window.addEventListener('load', function(){
            //var selettore = 'body > main > div > div.tabber-wrapper > div > div.tabs > div.tab-content > div > div > div > ng-form > div.row.clearfix > form > div:nth-child(1) > div > div:nth-child(1) > div > div > div > ul > li > a > span.text';
            var selettore = 'ul>li>a>span.text';
            var lista = document.querySelectorAll(selettore);
            
            lista.forEach(function (e, i) {
               var dato = e.innerHTML;
               if (/^\d+.*/.test(dato)) e.classList.add('codice-contratto');
            });

            
         });
         
      </script>
      
      <style>
         .codice-contratto {
            background: #eee;
         }
         .codice-contratto::before {
            content: "A00";
            color: #fff;
            font-weight: bold;
            background: #f00;
            padding: 0 .5em;
            margin-right: .5em;
          }
      </style>
      
   </head>
   <body>
   
      <ul>
         <li><a><span class="text">1543452 Lorem ipsum dolor sit amet</span></a></li>
         <li><a><span class="text">consectetur adipiscing elit</span></a></li>
         <li><a><span class="text">Morbi venenatis</span></a></li>
         <li><a><span class="text">nibh</span></a></li>
         <li><a><span class="text">sit amet</span></a></li>
         <li><a><span class="text">mi elementum semper</li>
      </ul>
      
      <ul>
         <li><a><span class="text">Lorem ipsum</span></a></li>
         <li><a><span class="text">dolor sit amet</span></a></li>
         <li><a><span class="text">consectetur</span></a></li>
         <li><a><span class="text">4586623 adipiscing elit</span></a></li>
         <li><a><span class="text">Morbi</span></a></li>
         <li><a><span class="text">venenatis</span></a></li>
         <li><a><span class="text">nibh</span></a></li>
      </ul>
      
      <ul>
         <li><a><span class="text">Lorem</span></a></li>
         <li><a><span class="text">ipsum</span></a></li>
         <li><a><span class="text">dolor sit amet consectetur</span></a></li>
         <li><a><span class="text">4586623</span></a></li>
      </ul>
      
   </body>
</html>

**Vincent.Zeno** · 05-03-2019, 23:29

sono riuscito a fare questo scopiazzando un po' e funziona, ma per una singola ricerca

codice:

<style type="text/css"> 
.highlight::before {content:"A00 ";background:yellow; color:red; font-weight:bold;}
</style>


<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script> 
function highlight () {
        var $query = 'codiceContratto1'
        var re = new RegExp($query, 'gi');
         var targetHtml = $('span.text').html();
       if(re.test(targetHtml)) {  
           var matches = targetHtml.match(re);       
           $('span.text').html(targetHtml.replace(re, '<span class="highlight">'+matches[0]+'</span>'));               
       } 
}


$(document).ready(function() {
     highlight();
});
</script>

riesci a modificarlo per ciclare i valori?

**Vincent.Zeno** · 05-03-2019, 23:30

visto ora
vado a testare...

**KillerWorm** · 06-03-2019, 00:59

Eccoci (dopo qualche chiarimento in privato):

codice:

<!DOCTYPE HTML>
<html lang="it">
   <head>
      <title>Esempio</title>
      <meta charset="utf-8">
      <script>
      
         window.addEventListener('load', function(){
         
            var codici = [                                                             // ['codice da cercare', 'etichetta da aggiungere']

               ['456797987', 'A00']
              ,['256974', 'A01']
              ,['AB123XY', 'B00']
              ,['ID:0001', 'C00']
              ,['AB-123', 'XYZ']
                                                                                       // a seguire aggiungi gli altri codici dentro questo array man mano che ti serve
            ];
            
            var selettore = 'ul>li>a>span.text';                                       // ...elimina questa riga e decommenta la seguente quando applichi lo script alla tua struttura
            //var selettore = 'body > main > div > div.tabber-wrapper > div > div.tabs > div.tab-content > div > div > div > ng-form > div.row.clearfix > form > div:nth-child(1) > div > div:nth-child(1) > div > div > div > ul > li > a > span.text';

            var lista = document.querySelectorAll(selettore);
            
            lista.forEach(function(e) {
               var dato = e.innerHTML;
               
               var pattern = '\\b(?:'+ codici.map(a=>'('+a[0]+')').join('|') +')\\b';  // costruisco il pattern per ricercare qualsiasi codice definito nell'array
               
               (dato.match(RegExp(pattern))||[]).slice(1).some(function(v,i){
                  if (v){
                     e.classList.add('codice-contratto');
                     e.dataset.etichetta = codici[i][1];
                  }
               });
            });
         });
         
      </script>
      
      <style>
         .codice-contratto::before {
            content: attr(data-etichetta);
            color: #fff;
            font-weight: bold;
            background: #f00;
            padding: 0 .5em;
            margin-right: .5em;
          }
      </style>
      
   </head>
   <body>
      
      <ul>
         <li><a><span class="text">456797987 - VIA NOME COGNOME, 58 48100 BOLOGNA (BO) IT</span></a></li>
         <li><a><span class="text">256974 - VIA NOME COGNOME, 58 48100 BOLOGNA (BO) IT</span></a></li>
         <li><a><span class="text">35256974 - Questo codice non esiste, perciò non viene applicata alcuna etichetta</span></a></li>
         <li><a><span class="text">VIA NOME COGNOME, 58 48100 BOLOGNA (BO) IT - AB123XY</span></a></li>
         <li><a><span class="text">VIA NOME COGNOME, 58 48100 BOLOGNA (BO) IT - -256974-</span></a></li>
      </ul>
      
   </body>
</html>

Nota l'array bidimensionale codici che dovrai definire inserendo opportunamente i tuoi codici di riferimento e la relativa etichetta che vorrai far apparire.

Vedi un po' se può andare.. per ora mi limito a dirti queste poche indicazioni, poi se hai bisogno di maggiori chiarimenti chiedi pure... nel caso sarà da ridefinire il preventivo... in seguito ti mando fatturazione

Notte!!

**Vincent.Zeno** · 06-03-2019, 01:07

wow!

domani lo testo sul campo, grazie

**Vincent.Zeno** · 06-03-2019, 14:38

vediamo se ho fatto giusto...

per creare il plugin uso questa struttura:

codice:

MANIFEST.JSON
{
// È obbligatorio definire nome e versione dell'applicazione
// il manifest che utilizziamo è quello della versione 2
"name": "Nome",
"version": "2.0",
"manifest_version": 2,
// Opzionale, indichiamo descrizione, formato e nome dell'immagine
"description": "Nome",
//"icons": { "16": "favicon.png" },
// Serve per dichiarare quali moduli o API di chrome utilizzeremo
// nell'applicazione. Per questo esempio abbiamo indicato che
// utilizzeremo i moduli chrome.tabs o chrome.windows
"permissions": [
"tabs"
],
// Ecco la parte in cui definiamo i nostri script per i contenuti
// e indichiamo a quali url applicare la nostra estensione
"content_scripts":
[
{
"matches": ["https://sito.it/*"],
"js": ["azioni.js"],
"css": ["css.css"]
}
]

AZIONI.JS

il codice js che mi hai fornito senza il tag <script>

CSS.CSS

il css senza il tag <style>

sembra che la pagina non ne voglia sapere di applicare il plugin...
devo dire che mi son dimenticato di una cosa importante: la pagina è tutta costruita con js e quindi mille mila chiamate in background.
potrebbe essere che in questo contesto non si riesca ad iniettare codice js?
ho fatto anche un tentativo di stampa con document.write ma non mi sembra abbia stampato nulla.

dopo tanto lavoro sarebbe un peccato non poterlo applicare

**Vincent.Zeno** · 06-03-2019, 17:13

uhmm... vedo che anche in localhost non fa il suo dovere.
c'è qualcosa di specifico da settare?

rettifico: in localhost funziona, errore mio...

anche impostando un percorso relativo come questo:

codice:

var selettore = 'ul>li>a>span.text';

sebbene abbia messo la lista in un contenitore padre

**KillerWorm** · 06-03-2019, 19:18

vediamo di fare qualche debug.. confermami intanto se in console non saltano fuori errori di script.

**Vincent.Zeno** · 06-03-2019, 19:20

vuoi collegarti con me e controllare di persona?

**KillerWorm** · 06-03-2019, 19:26

ti rispondo in privato

Discussione: modifica contenuto

Strumenti discussione

Ricerca discussione

Visualizza

Permessi di invio