Style & Replace Matching Strings

</ 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.
Author
CodeCrumbs
Updated on
Jun 29, 2022

How to use:

Tutorial Coming Soon!

Check Browser Support

Interactive Table

Find all text that matches a string value, wrap them in a span element to style and/or replace the string value.

Clone Project
Documentation
Author:
Built by
Built with
For the best experience

Please switch to desktop to view the content.

Back Home
Thank you! Your submission has been received!
Close Form
Oops! Something went wrong while submitting the form.
Become a Contributor