</ head>
</ body>
<!-- FIND, STYLE AND REPLACE MATCHING STRINGS -->
<script>
document.addEventListener('DOMContentLoaded', () => {
const selector = 'h1, p, li' // Separate HTML, Class or ID Selectors with commas
const identifier = 'Find me' // String you want to find and wrap
const replacementString = '' // Leave blank if you want to keep original string
const addClassToIdentifier = 'identifier' // Class that gets added to the span for styling
// No need to touch anything below
const pattern = new RegExp(`\\b(${identifier})`, 'gi');
const replacement = !replacementString ? `<span class="${addClassToIdentifier}">$1</span>` : `<span class="${addClassToIdentifier}">${replacementString}</span>`;
Array.from(document.querySelectorAll(selector)).forEach((element) => {
element.innerHTML = element.innerHTML.replace(pattern, replacement);
});
});
</script>
HTML/Embed
Only tabs with a " " have code.
<!-- FIND, STYLE AND REPLACE MATCHING STRINGS -->
<script>
document.addEventListener('DOMContentLoaded', () => {
const selector = 'h1, p, li' // Separate HTML, Class or ID Selectors with commas
const identifier = 'Find me' // String you want to find and wrap
const replacementString = '' // Leave blank if you want to keep original string
const addClassToIdentifier = 'identifier' // Class that gets added to the span for styling
// No need to touch anything below
const pattern = new RegExp(`\\b(${identifier})`, 'gi');
const replacement = !replacementString ? `<span class="${addClassToIdentifier}">$1</span>` : `<span class="${addClassToIdentifier}">${replacementString}</span>`;
Array.from(document.querySelectorAll(selector)).forEach((element) => {
element.innerHTML = element.innerHTML.replace(pattern, replacement);
});
});
</script>
Only tabs with a " " have code.
Only tabs with a " " have code.
How to use:
Tutorial Coming Soon!
Check Browser Support
Interactive Table
More related crumbs..
Want to contribute to the community?
Tell us what code you're working with. We would love to see it and possibly add it to the library.