Last active
July 5, 2022 11:47
-
-
Save donbrae/35841f68de35bce70ea1bb4cd71ac5d1 to your computer and use it in GitHub Desktop.
Some JavaScript for finding and highlighting a string on the page.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <title>Highlight element</title> | |
| <meta charset="utf-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <meta name="description" content="Find and highlight string" /> | |
| <style type="text/css"> | |
| html { | |
| font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen, Ubuntu, Cantarell, Open Sans, Helvetica Neue; | |
| } | |
| mark { | |
| background-color: #feff75; | |
| box-shadow: 0 0 0 2px #feff75; | |
| border-radius: 2px; | |
| } | |
| </style> | |
| <script> | |
| window.addEventListener('DOMContentLoaded', () => { | |
| document.querySelector('p').innerHTML = document.querySelector('p').innerHTML.replace(/\bis\b/gi, function (match) { | |
| return '<mark>' + match + '</mark>'; | |
| }); | |
| }); | |
| </script> | |
| </head> | |
| <body> | |
| <p>Is this or isn’t this a test? I believe this is a test.</p> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment