replace che mi fa perdere tutti i tag HTML

**Kahm** · 16-11-2017, 21:17

avendo di base questa pagina HTML: http://www.suale.it/prova/Help2.html

come potete notare, la sua funzionalità di base è che quando clicco sul capitolo si aprono le domande e poi alle domande si aprono le risposte
Ho aggiunto la ricerca, ebbene se provate a cercare un testo qualsiasi, tutta la formattazione tranne quella del capitolo SCOMPAIONO tutti i tag HTML

da cosa dipende?

**ciro78** · 16-11-2017, 21:26

io li vedo. cerco male?

**KillerWorm** · 17-11-2017, 01:12

da cosa dipende?

Questa è la tua funzione:

codice:

$('#searchfor').keyup(function() {
   var searchedText = $('#searchfor').val();

   $( "div" ).each(function() {
      var ParagText = $(this).text().replace("<span>", "").replace("</span>","");
      var theRegEx = new RegExp("(" + searchedText + ")", "igm");
      var newHtml = ParagText.replace(theRegEx, "<span>$1</span>");
      $(this).html(newHtml);

      if($(this).has("span").length){
         $(this).parent().show();
         $(this).show();  
      }        
   });
});

Ci sono 2 principali elementi che causano il problema:

1 - Con lo script $( "div" ).each(..., stai eseguendo un ciclo per tutti i div della pagina, compreso <div id="sub1" class="sub"> che contiene a sua volta i div delle domande e delle risposte.

2 - Per ognuno di questi div utilizzi il metodo .text() per prelevare il solo testo (escludendo quindi tutti gli eventuali tag html). A quel punto, dopo i vari replace, usi il metodo .html() che rimpiazza l'intero contenuto html relativamente ad ogni div esaminato.
Morale della favola, anche il suddetto <div id="sub1" class="sub"> viene ripopolato con il suo relativo testo privo dei tag html che conteneva in origine, perdendo di fatto i tag <div> in esso contenuti, cioè i tag relativi alle domande e risposte.
In effetti non ha senso processare il div contenitore, perché stai esaminando lo stesso testo (dell'intero contenitore) che dovrebbe essere invece esaminato singolarmente per ciascuno dei div figli.

Per risolvere potresti intanto restringere la ricerca ai soli div delle domande e risposte, di cui sei sicuro che contengano solo del testo, o comunque che non contengano ulteriori div.

Potresti usare un selettore del genere:

codice:

$( ".sub>div" ).each(...

Ad ogni modo, in generale, la sostituzione al volo di contenuto html non è mai un procedimento così scontato e sicuro, perché il rischio di sfasciare qualcosa è alto, come in questo caso che è comuque un caso relativamente semplice.

PS: nel codice sorgente della pagina che hai lincato ci sono diversi errori che lo rendono non valido. Ad esempio, il tag <script> è posto tra la chiusura del tag <head> e l'apertura di <body>. Questo è un errore strutturale del markup. Anche se il browser riesce magari ad interpretare il codice in maniera opportuna, è sempre meglio evitare qualsiasi errore. Il tag <script> può essere posto all'interno di <head>o all'interno di <body>.
Gli altri diversi errori puoi verificarli attraverso un validatore. Vedi questo: https://validator.w3.org/

**Kahm** · 17-11-2017, 09:59

si è vero,
ora ho usato invece di prendere il text ho preso HTML del tag
ma facendo dei replace tutta la formattazione alla fine si incasina

**KillerWorm** · 17-11-2017, 13:39

Bisognerebbe vedere nel dettaglio cosa avviene di preciso. In ogni caso se fai il replace direttamente sul codice HTML c'è comunque il rischio di rompere proprio quei tag che, pur non facendo parte del testo, vengono considerati durante il replace. In questo caso dovresti aggiungere degli ulteriori "filtri", ad esempio definendo l'esclusione di tali tag nel pattern della regex, o in qualche altro modo.

Però il discorso resta sempre valido sul fatto che non ha alcun senso eseguire il processo sia sul div contenitore sia sui div figli. Hai provato a cambiare il selettore jQuery come ti ho indicato?

**Kahm** · 17-11-2017, 13:54

grazie dei consigli,
sono stati veramente molto utili
alla fine ho preferito visualizzare un bordo
ecco il codice che ho usato

funziona bene e per ora va bene cosi

codice:

$(document).ready(function(){


$('#searchfor').keyup(function() {


    $('div').css('border', 'none');  //reset all of the spans to no border
	$('.sub').addClass('starthidden');
	$('.risposta').addClass('starthidden');
	
		
    var find = $('#searchfor').val();   //where txtFind is a simple text input for your search value


    if (find !="") {
        $('.risposta:contains(' + find + ')').each(function () {
            $(this).css('border', 'solid 2px red').show();    //mark the content risposta
		    $(this).parent().show();
        });
		$('.ask:contains(' + find + ')').each(function () {
            $(this).css('border', 'solid 2px red').show();    //mark the content in ask		   
        });
     }
});
   
  
  
});

Discussione: replace che mi fa perdere tutti i tag HTML

Strumenti discussione

Ricerca discussione

Visualizza

replace che mi fa perdere tutti i tag HTML

Permessi di invio