No soy programador (pero trato de crear pequeñas soluciones de programación para mi trabajo del día a día). Esta vez estoy tratando de construir un analizador de registro que resaltará palabras clave específicas en el archivo de registro (.txt) cuando se abra en un navegador. El archivo de registro estará en un servidor de registro y tendrá una URL específica. Quiero usar esa URL en la página del analizador de registros y abrir ese archivo de texto, una vez que se cargue el archivo de texto, javascript resaltará las palabras clave que he mencionado (estáticas) en javascript.
Intenté usar la solución mark.js.
<body> <h1>My First Heading</h1> <p>Lorem ipsum dolor sit āmet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, nò sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie çonsequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit prāesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet</p> <script> var instance = new Mark(document.querySelector("body")); instance.mark(["ipsum", "lorem"], { "accuracy": "exactly" }); $('mark').css({'background':'transparent' , 'color':'yellow'}); </script> </body>Pero mark.js solo ofrece la opción de resaltar palabras con un código de un solo color (en el código anterior usé amarillo), pero quiero que las palabras clave se resalten con diferentes colores como, por ejemplo, las palabras clave de información resaltadas con amarillo, las palabras clave de error resaltadas con palabras clave rojas y de éxito resaltadas en verde . ¿Qué solución puedo usar aquí para lograr mi objetivo? cualquier ayuda es apreciada.
También cómo puedo abrir un archivo de texto usando la URL y hacer que JS funcione en él. Probé la etiqueta HTML OBJECT pero luego el javascript no funcionaba (no resaltaba).
Mi solución es sin Mark js:
Paso 1. Obtenga el contenido HTML del párrafo. Paso 2. Usa expresiones regulares para encontrar el valor en el texto original. Paso 3. Reemplace el texto original con un elemento span dom de texto agregado.
const text = document.querySelector("p"); const input = document.querySelector("input"); const button = document.querySelector("button"); const originalTxt = text.innerHTML; button.addEventListener("click", (e) => { e.preventDefault(); mark(); }); function mark() { const inputValue = input.value; const regex = new RegExp(inputValue, "gi"); text.innerHTML = originalTxt.replace( regex, `<span style="color:red;">${inputValue}</span>` ); } <input type="text" /> <button>Mark!</button> <h1>My First Heading</h1> <p>Lorem ipsum dolor sit āmet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, nò sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie çonsequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit prāesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet </p>Lo hice sin mark.js. El código está comentado, comprueba si es esto lo que quieres. Básicamente, encontré todas las apariciones de palabras en la matriz ["ipsum", "lorem"] y cambio la palabra por la misma palabra dentro de un elemento con color de clase.
//function to replace word for element with class function switchKeyWordsToElement(words, color){ var text = document.querySelector("p").innerHTML for(var i = 0; i < words.length; i++){ var finalText = text.split(words[i]).join('<span class="' + color + '">' + words[i] + '</span>'); text = finalText } //add to <p></p> final text document.querySelector("p").innerHTML = text } //lists of words to search const yellowWords = ["ipsum", "Lorem"] const redWords = ["sit", "elitr"] //switch yellow words switchKeyWordsToElement(yellowWords, 'yellow') //switch red words switchKeyWordsToElement(redWords, 'red') .red{ color: red; } .yellow{ color:yellow; } <html> <head> </head> <body> <h1>My First Heading</h1> <p> Lorem ipsum dolor sit āmet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, nò sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie çonsequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit prāesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet </p> </body> </html>Tendrá que confiar en las clases css para diseñar
luego pase la clase al atributo className en el diccionario de options en la llamada adecuada. Podemos usar un objeto y llamar en cadena al método mark() de la siguiente manera:
// create Mark.js instance var marker = new Mark('body') // create lists for easy updating of search terms info_words = ['lorem', 'ipsum'] err_words = ['sit','et'] success_words = ['dolor','te'] // chain mark method calls together marker.mark(info_words,{accuracy:'exactly'}) .mark(err_words, { accuracy:'exactly', className:'err' }) .mark(success_words, { accuracy: 'exactly', className:'success' }) .err { color: white; background-color: red; } .success { color: white; background-color: green; } <script src="https://cdnjs.cloudflare.com/ajax/libs/mark.js/8.11.1/mark.min.js"></script> <html> <head> </head> <body> <h1>My First Heading</h1> <p> Lorem ipsum dolor sit āmet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, nò sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie çonsequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit prāesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet </p> </body> </html>