A continuación se muestra un documento HTML que trata básicamente sobre cómo resaltar el resultado de la string buscada. En este artículo, estamos utilizando HTML, CSS, JavaScript, Bootstrap y mark.js para que nuestro sitio web sea más efectivo. Además, exclusivamente para resaltar la string buscada entre un contexto o párrafo dado, mark.js juega un papel vital en este código en particular. Antes de abordar este problema, mantenga una marca de mis palabras de que el problema se puede resolver con muchos otros enfoques, pero creo que este también puede ser un enfoque mucho mejor para este problema dado.
¿Qué es mark.js?
mark.js es una herramienta de JavaScript simple que se utiliza para resaltar el texto. Que se utiliza para marcar dinámicamente términos de búsqueda o expresiones regulares personalizadas y ofrece algunas opciones integradas como compatibilidad con signos diacríticos, búsqueda de palabras separadas, etc.
Acercarse:
- Lo primero es lo primero cuando ingresa una string en el cuadro de búsqueda y presiona el botón de búsqueda, luego una función simple de JavaScript llamará al nombre de resaltado() que tiene la función principal de resaltar el texto de búsqueda que ingresó en el cuadro de búsqueda. En este pequeño, vamos a usar el código mark.js para resaltar el texto.
- Hay muchas funciones integradas en mark.js, pero estamos usando dos funciones para nuestro requisito, que son las funciones mark() y unmark() respectivamente. Aquí mark() se usa para resaltar el texto de búsqueda y unmark() se usa para eliminar el resaltado del texto que está resaltado antes.
Sintaxis de marca():
var context = document.querySelector(".context");
var obj = new Mark(context);
obj.mark(searchkeyword [, options]);
- Entendamos este código de manera un poco técnica,
- Primero declaramos una variable que contiene contexto desde el cual va a encontrar y resaltar el texto buscado.
- Cree un objeto de la marca y luego llame al método mark() a través del obj que creó anteriormente.
- Lleva dos parámetros, es decir, uno es una palabra clave buscada y otro es opcional.
Sintaxis de desmarcar():
var context = document.querySelector(".context");
var obj = new Mark(context);
obj.unmark(options);
- Esto es casi lo mismo que la técnica anterior, pero la única diferencia mínima es que el método unmark() toma solo un argumento, es decir, opcional. Además, si desea cambiar el color y el relleno del resaltador, debemos realizar pequeños cambios en el código CSS dentro de la marca que se muestra a continuación:
mark { color: black; background: green; padding: 5px; }
- Espero que haya seguido con éxito los pasos anteriores para realizar cambios en el color del texto resaltado en particular. Pero aquí, asegúrese de que no quede ninguna string resaltada con ningún color en particular, si es así, no olvide quitar el resaltado del texto que se buscó anteriormente. A partir de entonces, marque la nueva string que se va a buscar y podrá cambiar su color según su conveniencia.
- Para más información sigue esta página .
Ejemplo:
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<!-- CDN of fontawsome -->
<link rel="stylesheet" href=
"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<!-- CDN of Bootstrap -->
<link rel="stylesheet" href=
"https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css"
integrity=
"sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ"
crossorigin="anonymous">
<!-- CDN of mark.js -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/mark.min.js"
integrity=
"sha512-5CYOlHXGh6QpOFA/TeTylKLWfB3ftPsde7AnmhuitiTX4K5SqCLBeKro6sPS8ilsz1Q4NRx3v8Ko2IBiszzdww=="
crossorigin="anonymous">
</script>
<!-- CDN of google font -->
<style>
@import url('https://fonts.googleapis.com/css2?family=Roboto+Slab:wght@500&display=swap'
);
</style>
<style>
mark.a0 {
color: black;
padding: 5px;
background: greenyellow;
}
mark.a1 {
color: black;
padding: 5px;
background: cyan;
}
mark.a2 {
color: black;
padding: 5px;
background: red;
}
mark.a3 {
color: white;
padding: 5px;
background: green;
}
mark.a4 {
color: black;
padding: 5px;
background: pink;
}
</style>
</head>
<body style="border:4px solid rgb(0, 128, 28);">
<h1 style="font-family: 'Roboto Slab',
serif;text-align: center;color:green;">
GeeksForGeeks
</h1>
<br><br>
<form>
<div class="container-fluid" align="center">
<input type="text" size="30"
placeholder="search..." id="searched"
style="border: 1px solid green;
width:300px;height:30px;">
<button type="button" class="btn-primary btn-sm"
style="margin-left:-5px;height:32px;width:35px;
background-color:rgb(12, 138, 12);
border:0px;" onclick="highlight('0');">
<i class="fa fa-search"></i>
</button>
</div>
</form>
<br><br>
<div align="center">
<div>
<b><i>Choose the color of highlighter:</i></b>
</div>
<br>
<div style="background-color: cyan;
width: 20px; height: 20px;
display: inline-block; margin-left: -30px;"
onmouseover="highlight('1')">
</div>
<div style="background-color: red;
width: 20px; height: 20px;
display: inline-block; margin-left: 10px;"
onmouseover="highlight('2')">
</div>
<div style="background-color: green;
width: 20px; height: 20px;
display: inline-block; margin-left: 10px;"
onmouseover="highlight('3')">
</div>
<div style="background-color: pink;
width: 20px; height: 20px;
display: inline-block; margin-left: 10px;"
onmouseover="highlight('4')">
</div>
</div>
<div class="container-fluid" style=
"padding-left: 30%; padding-right: 30%;
padding-top: 5%;">
<p class="select">
GeeksforGeeks.org was created with a
goal in mind to provide well written,
well thought and well explained solutions
for selected questions.The core team of
five super geeks constituting of technology
lovers and computer science enthusiasts
have been constantly working in this
direction.
</p>
</div>
<script>
function highlight(param) {
// Select the whole paragraph
var ob = new Mark(document.querySelector(".select"));
// First unmark the highlighted word or letter
ob.unmark();
// Highlight letter or word
ob.mark(
document.getElementById("searched").value,
{ className: 'a' + param }
);
}
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por debadebaduttapanda7 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA