2015-11-26 14 views
6

Ho creato una funzione, che cercherà tag diversi, tag come [immagine] e [galleria] all'interno di un file JSON. Se c'è una corrispondenza, verrà restituita e sostituita con una nuova uscita. Come un oggetto immagine o una presentazione.Come controllare e restituire i dati fino a quando non ci sono corrispondenze?

Un oggetto JSON può contenere più tag dello stesso tipo o contenere diversi nello stesso momento. Quindi un oggetto può contenere due tag [immagine] per es.

JSON

http://snippi.com/s/bzrx3xi

il problema è stato, se ci sono più tag [immagini] trovati, è stato sostituito con lo stesso contenuto. Stavo cercando uno script che sta cercando i tag, fino a quando non ci saranno più corrispondenze. Mille grazie a @debatanu per la soluzione.

Sfortunatamente, ho alcuni desideri in più per lo script, perché ora i tag come l'immagine, saranno sostituiti per l'ultimo oggetto immagine dell'array multimediale all'interno del JSON e prenderà e sostituirà solo il primo tag.

Mi chiedevo se è possibile controllare ogni tag e sostituire ogni tag con il nuovo output.

ricerca per didascalia

filterText: function(data) { 

     // Loop through JSON data 
     // Check if [tag] in data.text exists 
     var dataText = data.text; 
     var tags = { 
      "gallery": /\[gallery\]/ig, 
      "image": /\[image\]/ig 
     }; 


     if (dataText != undefined) { 
      var raw_data = dataText; 

      for (var key in tags) { 

       if (tags.hasOwnProperty(key)) { 
        var tag = tags[key]; 
        var tagArr = []; 

        // Check if [tag] in data.text exists 
        while ((tagArr = tag.exec(dataText)) !== null) { 

         // Call functions 
         if (key == "gallery") { 
          console.error('GALLERY'); 
          parsedHTML = raw_data.replace(tagArr[0], shortcodeController.gallery(data)); 
          raw_data = parsedHTML; 
          return parsedHTML; 
         } 

         if (key == "image") { 
          console.error('IMAGE'); 
          parsedHTML = raw_data.replace(tagArr[0], shortcodeController.image(data)); 
          raw_data = parsedHTML; 
          return parsedHTML; 
          // model.find('p').html(parsedHTML); 
         } 

        } 

       } 

      } 
     }; 

chiamare la funzione filterText

getDataPopup: function(data) { 

     if (data.text != undefined) { 
      $('.js-popup .article').html(data.text); 
      var parsed = dataController.filterText(data); 
      console.log('parsed: ', parsed); 
      $('.js-popup .article').html(parsed); 
     } else { 
      $('.js-popup .article').html(data.intro); 
     } 

    }, 

Sopra funzione cercherà tag all'interno di un ciclo while. Questo script viene chiamato, quando l'utente fa clic su un elemento, che aprirà una schermata popup.

Lo script che viene chiamato dalla funzione getDataPopup quando l'utente fa clic su un elemento, cercherà una corrispondenza, quando v'è una corrispondenza trovata, si chiamerà la funzione shortcodeController.image(data) che restituiscono il nuovo output alla variabile: parsedHTML .

La funzione che genera una nuova uscita sarà simile a questa:

image: function(data) { 

     // Development 
     console.log('shortcodeController.image'); 

     var raw_data = data.text; 
     var outputHTML; 

     if (data.media != undefined) { 

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

       if (data.media[i].image != undefined) { 

        outputHTML = '<div class="image">'; 

        // Extract filename 
        var url = data.media[i].image.src; 
        var filename = url.substring(url.lastIndexOf('/') + 1, url.lastIndexOf('.')); 
        // console.log(filename); 

        outputHTML += '<img src="' + url + '" alt="' + filename + '" />'; 
        //data.media[i].image = undefined; 

        outputHTML +='</div>'; 

       } 

      }; 

      return outputHTML; 

     } else { 
      // If media doesn't exists return empty string 
      return ''; 
     } 

    }, 

Debatanu ha detto che devo utilizzare data.media[i].image = undefined; direttamente dopo l'outputHTML che contiene l'oggetto immagine reale, ma questo si tradurrà in un errore indefinito . Il primo tag [image] è sostituito da undefined. Quando commento questa riga, verrà sostituita dall'ultimo oggetto immagine all'interno dell'array multimediale, come menzionato prima.

Forse non funziona come correttamente, perché il ciclo while, tuttavia, cerca solo la galleria e i tag immagine e se c'è una corrispondenza, eseguirla una volta, perché ha già visto il tag. Quindi verrà richiamato nuovamente e sostituirà nuovamente il primo tag immagine con il secondo oggetto immagine all'interno dell'array multimediale. Dovrebbe esserci un ciclo while aggiunto nelle istruzioni if ​​se si tratta di una galleria o di un'immagine, quindi per ogni tag all'interno dell'oggetto di testo è chiamata la funzione?

Inoltre ho notato, quando console registrati tagArr mi darà un valore nullo quando passato dopo il ciclo while e un array vuoto [] quando incollo direttamente dopo la creazione della matrice.Oltre a ciò, quando consegno il tag di log direttamente dopo l'avvio del ciclo while, viene visualizzato solo un tag di log una volta, mentre all'interno del JSON sono presenti due tag di immagine.

Spero che attraverso questo aggiornamento la domanda sia più precisa e che il problema sia anche definito molto più chiaramente. Se avete domande, fatemelo sapere su di esso ed io speriamo di poter venire alla soluzione giusta :)

risposta

4

È possibile utilizzare exec e passante attraverso di esso utilizzando

var dataText = data.text; 
    var tags = { 
     "gallery": /\[gallery\]/ig, 
     "image": /\[image\]/ig, 
    }; 

    if (dataText != undefined) { 
     var raw_data = dataText; 

     for (var key in tags) { 
      if (tags.hasOwnProperty(key)) { 
       var tag = tags[key]; 
       var arr=[]; 


     while ((arr= tag.exec(dataText)) !== null) { 
       //arr[0] will contain the first match 


        //var newTag=newTags[key]; 
        //you need to replace the matched output 
        //so no need for newTag 
        if (key == "gallery") { 
         console.error('GALLERY'); 
         //replace the matched output arr[0] 
         //instead tag or newTag 
         //Since u have [] to replace we need to ommit the regex literal format /<<exp>>/ 
         parsedHTML = raw_data.replace(arr[0], Triptube.shortcodeController.gallery(data)); 
         //Need to add this line for reflecting the changed data 
         raw_data=parsedHTML; 
         model.find('p').html(parsedHTML); 
        } 

        if (key == "image") { 
         console.error('IMAGE'); 
         //replace the matched output arr[0] 
         //instead tag or newTag 
         //Since u have [] to replace we need to ommit the regex literal format /<<exp>>/ 
         parsedHTML = raw_data.replace(arr[0], Triptube.shortcodeController.image(data)); 
         console.log(parsedHTML); 
         //Need to add this line for reflecting the changed data 
         raw_data=parsedHTML; 
         model.find('p').html(parsedHTML); 
        } 

       } 
      } 
     } 
    } 

È possibile trovare maggiori informazioni in MDN Con ogni ciclo, lo exec ti darà la partita successiva fino a quando non verrà trovata alcuna corrispondenza.

EDIT

Ho aggiunto l'intero codice del filtro dall'inizio. Si vede la variabile raw_data dovrebbe essere assegnata prima del ciclo. Una volta fatto, il codice sottostante con la funzione immagine dovrebbe darti il ​​risultato corretto.

EDIT 2

Innanzitutto la funzione filterText restituirà il completamento posto html analizzata del parsing html

filterText: function(data) { 

    // Loop through JSON data 
    // Check if [tag] in data.text exists 
    var dataText = data.text; 
    var tags = { 
     "gallery": /\[gallery\]/ig, 
     "image": /\[image\]/ig 
    }; 


    if (dataText != undefined) { 
     var raw_data = dataText, 
     newData=JSON.parse(JSON.stringify(data));//Copy of the data object 

     for (var key in tags) { 

      if (tags.hasOwnProperty(key)) { 
       var tag = tags[key]; 
       var tagArr = []; 

       // Check if [tag] in data.text exists 
       while ((tagArr = tag.exec(dataText)) !== null) { 

        // Call functions 
        if (key == "gallery") { 
         console.error('GALLERY'); 
         parsedHTML = raw_data.replace(tagArr[0], shortcodeController.gallery(newData)); 
         raw_data = parsedHTML; 
         //return parsedHTML; 
        } 

        if (key == "image") { 
         console.error('IMAGE'); 
         parsedHTML = raw_data.replace(tagArr[0], shortcodeController.image(newData)); 
         raw_data = parsedHTML; 
         //return parsedHTML; we will return the parsed HTML only when all the tags have been replaced 
         // model.find('p').html(parsedHTML); 
        } 

       } 

      } 

     } 
     return parsedHTML; //return the parsed HTML here 
    }; 

successivo è la funzione image che analizzare attraverso le immagini,

 image: function(data) { 

    // Development 
    console.log('shortcodeController.image'); 

    var raw_data = data.text; 
    var outputHTML; 

    if (data.media != undefined) { 

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

      if (data.media[i].image != undefined) { 

       outputHTML = '<div class="image">'; 

       // Extract filename 
       var url = data.media[i].image.src; 
       var filename = url.substring(url.lastIndexOf('/') + 1, url.lastIndexOf('.')); 
       // console.log(filename); 

       outputHTML += '<img src="' + url + '" alt="' + filename + '" />'; 
       outputHTML +='</div>'; 
       data.media[i].image = undefined; 
       //Uncommented the above code, because now the operation will be done on the copy of the original data object 



      } 

     }; 

     return outputHTML; 

    } else { 
     // If media doesn't exists return empty string 
     return ''; 
    } 

} 
+0

Se si utilizza una regex literal invece della variabile 'tag', si otterrà un i ciclo infinito. Hai provato ad usarlo? MDN fornisce un esempio piuttosto elaborato. – debatanu

+0

Guardo il codice, ma arr non verrà compilato correttamente? Nel codice precedente, newTag verrà riempito con newTag o ho sbagliato? – Caspert

+0

In realtà, quando c'è una corrispondenza, la partita viene restituita come una matrice, quindi se c'è una corrispondenza arriverà il pop con i dati se non restituirà null e uscirà dal ciclo while. Il 'newTags' non è necessario, è possibile utilizzare la corrispondenza' arr [0] 'da utilizzare direttamente per la sostituzione. – debatanu

Problemi correlati