Ho cercato di effettuare una ricerca semplice all'interno di una pagina HTML statica utilizzando JQuery. Devo dire che questa è solo la prima volta che lavoro con JQuery.Ricerca JQuery in pagina HTML statica con evidenziazione della parola trovata

Sto cercando di cambiare lo sfondo della parola trovata nella pagina e questo è quello che ho provato finora:

myJavascript.js:

$(document).ready(function(){ 

    $('#searchfor').keyup(function(){ 
     page = $('#all_text').text(); 
     searchedText = $('#searchfor').val(); 
     $("p:contains('"+searchedText+"')").css("color", "white"); 
    }); 
});

Ecco il codice HTML codice così:

page.html:

<html> 
<head> 
    <title>Test page</title> 
</head> 
<body bgcolor="#55c066"> 
<input type="text" id="searchfor"></input> 
    <p id="all_text">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euism modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum. 
    <font color="red">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tinci futurum.</font> 
    </p> 
</body> 
    <script src="jquery-1.7.2.min.js"></script> 
    <script src="myJavascript.js"></script> 
</html>

Dopo aver ispezionato la pagina con Firebug, posso vedere che le variabili in JQuery ottengono il valore dal campo di input, ma suppongo che sto rovinando la parte di evidenziazione.

Grazie in anticipo per il vostro aiuto!

fonte

2012-04-04 Radu Gheorghiu

Avete bisogno di sottolineare _solo_ la parola o l'intero paragrafo ('p')? – mshsayem

Solo la parola, e ho cambiato il titolo in quello che volevo veramente, evidenziando la parola trovata. –

Se vuoi sottolineare solo la parola cercata, devi avvolgere la parola in un tag html come 'span' (imposta lo stile di span da sottolineare) e sostituire il contenuto dell'elemento' p' – scibuff

fare qualcosa di simile

$("p:contains('"+searchedText+"')").each(function(i, element) { 
     var content = $(element).text(); 
     content = content.replace(searchedText, '<span class="search-found">' + searchedText + '</span>'); 
     element.html(content); 
}); 

.search-found { 
    text-decoration: underline; 
}

P.S. questo funziona solo se ognuno degli "elementi" ha testo normale solo i contenuti altrimenti sarebbe rimuovere figli nodi

EDIT: rimosso l'extra ')' nel each callback

fonte

2012-04-04 13:00:24 scibuff

Ho provato il tuo codice ma Firebug mi dà un errore: alla riga 6, colonna 66 ma non c'è niente lì. Vedo che dovrebbe esserci un altro parametro nella funzione 'each()', ma non riesco a capire cosa sia. –

c'è un extra ')' dopo 'element' rimuovi uno di questi, ie .'function (i, element) {' ma onestamente dovresti essere in grado di fare questo un po 'di debugging minore - Ho aggiornato il codice sopra – scibuff

Oh , Dio ... sei così giusto, io che tutto .. Grazie. –

-1

(per una cosa che si desidera utilizzare background-color, non a colori, per lo sfondo)

vorrei creare una classe CSS per il normale e una separata (ereditato) classe CSS per il testo evidenziato, e quindi utilizzare il JQuery per cambiare la classe css quando trovi quello che stai cercando.

Solo i miei pensieri iniziali, però, non sono sicuro se c'è un modo migliore di farlo.

MODIFICA: se si desidera modificare solo una parola specifica, è necessario modificare innerHTML per inserirla in un tag separato in quel punto.

fonte

2012-04-04 12:56:05 Oofpez

Ok, ho capito la tua idea. Proverò a fare qualcosa del genere, spero solo di non rovinare il codice. –

-1

Ecco un altro esempio che ho subito hacked : http://jsfiddle.net/VCJUX/

fonte

2012-04-04 13:19:22 alxbrd

Funziona, ma solo per una parola .. –

Questo è veramente bello, il problema è; se stai cercando una pagina con uno stile diverso, interrompe l'intera pagina rimuovendo tutti i tag p, span, link, ecc ... –

Qui è mio: http://jsfiddle.net/x8rpY/1/

JS:

$('#searchfor').keyup(function(){ 
     var page = $('#all_text'); 
     var pageText = page.text().replace("<span>","").replace("</span>"); 
     var searchedText = $('#searchfor').val(); 
     var theRegEx = new RegExp("("+searchedText+")", "igm");  
     var newHtml = pageText.replace(theRegEx ,"<span>$1</span>"); 
     page.html(newHtml); 
    });

CSS:

#all_text span 
{ 
    text-decoration:underline; 
    background-color:yellow;  
}

Lavori per la ricerca ripetuto anche.

fonte

2012-04-04 14:36:00 mshsayem

Grazie, ma se cerco lettere maiuscole e trova quelle stesse lettere minuscole quindi converte le maiuscole in maiuscole. –

L'ho risolto ... – mshsayem

@mshsayem ** Codice impressionante **, grazie. È possibile spostare il documento nel punto in cui la parola è presente in Jquery ?. Perché ho una pagina web di grandi dimensioni e ho bisogno di spostare il puntatore nel punto in cui è presente la parola effettiva come la funzione Chrome di Google (ctrl + f5). – webblover

Perché utilizzando una funzione di evidenziazione selfmade è una cattiva idea

Il motivo per cui è probabilmente una cattiva idea per iniziare a costruire la propria funzione di evidenziazione da zero è perché si sarà certamente incorrere in problemi che altri hanno già risolto.Sfide:

Si avrebbe bisogno di rimuovere i nodi di testo con elementi HTML per evidenziare le corrispondenze senza distruggere gli eventi DOM e innescando la rigenerazione DOM più e più volte (che sarebbe il caso ad esempio innerHTML)
Se si desidera per rimuovere gli elementi evidenziati è necessario rimuovere elementi HTML con il loro contenuto e devono anche combinare i nodi di testo suddivisi per ulteriori ricerche. Ciò è necessario perché ogni plug-in di evidenziatore cerca all'interno di nodi di testo le corrispondenze e se le parole chiave saranno suddivise in più nodi di testo non verranno trovate.
Dovresti anche creare test per assicurarti che il tuo plug-in funzioni in situazioni a cui non hai pensato. E sto parlando di test cross-browser!

Suoni complicati? Se vuoi alcune funzionalità come ignorare alcuni elementi dall'evidenziazione, mappatura diacritica, mappatura dei sinonimi, ricerca all'interno di iframe, ricerca di parole separate, ecc. Questo diventa sempre più complicato.

Utilizzare un plugin esistente

Quando si utilizza un esistente, plug-in ben implementato, non ci si deve preoccupare cose su summenzionate. L'articolo 10 jQuery text highlighter plugins su Sitepoint confronta i plug-in di evidenziatore più diffusi. Questo include plugin di risposte da questa domanda.

Dai un'occhiata alla mark.js

mark.js è un plugin che è scritto in puro JavaScript, ma è disponibile come plugin jQuery anche. E 'stato sviluppato per offrire più opportunità che gli altri plugin con le opzioni a:

ricerca per parole chiave separatamente invece del termine completo
mappa segni diacritici (ad esempio, se "justo" dovrebbero corrispondere "justo")
ignorare le partite all'interno elementi personalizzati
uso di elementi evidenziando personalizzato
utilizzare la classe evidenziazione personalizzati
sinonimi mappa personalizzata
di ricerca anche all'interno di iframe
termini ricevere non si trovano

DEMO

In alternativa si può vedere this fiddle.

esempio Uso:

// Highlight "keyword" in the specified context 
$(".context").mark("keyword"); 

// Highlight the custom regular expression in the specified context 
$(".context").markRegExp(/Lorem/gmi);

È gratuito e open-source sviluppato su GitHub (project reference).

Esempio di marchio.js parola chiave mettendo in evidenza con il codice

$(function() { 
 
    $("input").on("input.highlight", function() { 
 
    // Determine specified search term 
 
    var searchTerm = $(this).val(); 
 
    // Highlight search term inside a specific context 
 
    $("#context").unmark().mark(searchTerm); 
 
    }).trigger("input.highlight").focus(); 
 
});

mark { 
 
    background: orange; 
 
    color: black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdn.jsdelivr.net/mark.js/7.0.0/jquery.mark.min.js"></script> 
 
<input type="text" value="test"> 
 
<div id="context"> 
 
    Lorem ipsum dolor test sit amet 
 
</div>

fonte

2016-05-21 14:42:48 dude

Sono d'accordo con quello che hai detto, ma dal momento che questa domanda risaliva all' waay waay 2012, quando non erano disponibili molte librerie JS, questo era l'unico modo in cui potevo fare le cose. Quindi, andando avanti, dovresti assolutamente cercare i plugin esistenti. Altrimenti, inizia a crearne di tuoi e condividilo! –

$(function() { 
 
    $("input").on("input.highlight", function() { 
 
    // Determine specified search term 
 
    var searchTerm = $(this).val(); 
 
    // Highlight search term inside a specific context 
 
    $("#context").unmark().mark(searchTerm); 
 
    }).trigger("input.highlight").focus(); 
 
});

mark { 
 
    background: orange; 
 
    color: black; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://cdn.jsdelivr.net/mark.js/7.0.0/jquery.mark.min.js"></script> 
 
<input type="text" value="test"> 
 
<div id="context"> 
 
    Lorem ipsum dolor test sit amet 
 
</div>

fonte

2017-04-20 10:19:41 Rajan

Ricerca JQuery in pagina HTML statica con evidenziazione della parola trovata

risposta

Perché utilizzando una funzione di evidenziazione selfmade è una cattiva idea

Utilizzare un plugin esistente

Dai un'occhiata alla mark.js

Esempio di marchio.js parola chiave mettendo in evidenza con il codice

Problemi correlati