Skip to content

Instantly share code, notes, and snippets.

@donbrae

donbrae/highlight-string.html

Last active July 5, 2022 11:47
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save donbrae/35841f68de35bce70ea1bb4cd71ac5d1 to your computer and use it in GitHub Desktop.
Save donbrae/35841f68de35bce70ea1bb4cd71ac5d1 to your computer and use it in GitHub Desktop.
Download ZIP
Some JavaScript for finding and highlighting a string on the page.
Raw
highlight-string.html
<!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