Come aggiornare il codice all’interno di textarea con jQuery

Ho una textarea che conterrà un codice inserito dall’utente e voglio ottenere quel codice e scansionarlo con jQuery per ottenere il valore all’interno di un tag personalizzato chiamato setting, quindi aggiungere questo valore a un input in modo che l’utente possa modificare il valore valore all’interno dell’impostazione del tag senza toccare il codice. Sono stato in grado di ottenere i valori e aggiungerli all’interno degli input, ma non ho potuto aggiornare il codice con i nuovi valori.

CODICE HTML:

CODICE CSS:

 .unactive { display: none } 

jQuery CODICE:

 $('#template-code').change(function (){ var $that = $(this), template_code = $that.val(), code = '', new_data = ''; // Extract settings from the theme and add them to #result $(document).on('click', '#submit-code', function (){ $('#tab-1').addClass('unactive'); $('#tab-2').removeClass('unactive'); $(template_code).find('setting').each(function (i){ var $this = $(this), setting_std = $this.text(), setting_id = $this.attr('id'); code += '
'; }); if(code !== ''){ $('#result').html(code); } }); // Update old data with the new one $(document).on('click', '#update-code', function (){ new_data = $( "#settings-form" ).serializeArray(); $.each( new_data, function( i, new_field ) { template_code += $(template_code).find('setting#'+ new_field.name).text(new_field.value); console.log(new_field.value); }); $('#template-code').val(template_code); $('#tab-1').removeClass('unactive'); return false; }); });

Questo è un esempio del codice del tema che verrà aggiunto all’interno dell’area di testo:

          
http://lorempixel.com/640/300/ on

Questo è un JsFiddle funzionante per semplificarti le cose:

http://jsfiddle.net/mabwhf6a/3/

Questo è un piccolo video che spiega ciò che voglio:

http://screencast.com/t/XqggRlQI6

Ok, ecco un’idea basata su, hm … semplice ricerca / sostituzione con regex dinamico (quella parte potrebbe / dovrebbe essere migliorata, forse con una regex migliore si può avere una soluzione migliore.Sono ctriggers alle espressioni regolari, ma anche HTML non dovrebbe essere analizzato con regex :)). La prima parte del tuo codice è così com’era … ho cambiato la seconda funzione.

 $(document).on('click', '#update-code', function (){ //template_code=$('#template-code').val(); for(i=0;i< $('input:text').length;i++) { dynamic_regex="()(.*?)()"; var regex = new RegExp(dynamic_regex, 'gm'); var subst = '$1'+ $('input:text').eq(i).val() +'$3'; $('#template-code').val($('#template-code').val().replace(regex, subst)); } }); 

Quindi, il numero di input di testo è dinamico (testato su 3 tag di impostazione!), E in base a quel numero (lunghezza) e input id – costruiamo espressioni regolari e sostituiamo il testo dei tag (riga per riga) con valori di input … ovviamente , textarea val deve essere aggiornato, correttamente.

Demo: http://jsfiddle.net/5zcxbaqf/

Puoi provare questo codice per aggiornare i vecchi dati con quello nuovo:

 $(document).on('click', '#update-code', function (){ new_data = $( "#settings-form" ).serializeArray(); $.each( new_data, function( i, new_field ) { var xml = $($.parseXML(template_code)); xml.find('setting#'+ new_field.name).text(new_field.value); template_code = (new XMLSerializer()).serializeToString(xml[0]); }); $('#template-code').val(template_code); $('#tab-1').removeClass('unactive'); return false; }); 

Demo: http://jsfiddle.net/robinhuy/jd2hrgn8/