Text Replace

<!-- SWAP VALUES ON CLICK --> 
<script>
function setupSwitcher({
  /* Click Trigger Class */
  swapTrigger = "switcher",

  /* Essentials */
  swapText = "swap-text",
  swapDisplay = "swap-display",
  swapClass = "swap-class",
  swapUrl = "swap-url",

  /* Toggle and Add Attributes */
  swapToggleAttribute = "swap-toggle-attribute",
  swapAddAttribute = "swap-add-attribute",
  swapAddAttributeValue = "swap-add-attribute-value",

  /* Replace Attribute Value */
  swapAttributeTarget = "swap-attribute-target",
  swapTargetValue = "swap-target-value"

} = {}) {
  const swapAll = () => {
    // SWAP TEXT
    document.querySelectorAll(`[${swapText}]`).forEach((swapDomElement) => {
      const nextValue = swapDomElement.getAttribute(swapText);
      const currentValue = swapDomElement.innerText;

      swapDomElement.innerText = nextValue;
      swapDomElement.setAttribute(swapText, currentValue);
    });

    // SWAP DISPLAY
    document.querySelectorAll(`[${swapDisplay}]`).forEach((swapDomElement) => {
      const nextValue = swapDomElement.getAttribute(swapDisplay);
      const currentValue = swapDomElement.style.display;

      swapDomElement.style.display = nextValue;
      swapDomElement.setAttribute(swapDisplay, currentValue);
    });

    // SWAP CLASS
    document.querySelectorAll(`[${swapClass}]`).forEach((swapDomElement) => {
      const nextValue = swapDomElement.getAttribute(swapClass);
      swapDomElement.classList.toggle(nextValue);
    });

    // SWAP URL
    document.querySelectorAll(`[${swapUrl}]`).forEach((swapDomElement) => {
      const nextValue = swapDomElement.getAttribute(swapUrl);
      const currentValue = swapDomElement.href;

      swapDomElement.href = nextValue;
      swapDomElement.setAttribute(swapUrl, currentValue);
    });

    // TOGGLE ATTRIBUTE
    document.querySelectorAll(`[${swapToggleAttribute}]`).forEach((swapDomElement) => {
      const toggleAttribute = swapDomElement.getAttribute(
        swapToggleAttribute
      );
      swapDomElement.toggleAttribute(toggleAttribute);
    });

    // ADD ATTRIBUTE
    document.querySelectorAll(`[${swapAddAttribute}]`).forEach((swapDomElement) => {
      const newAttribute = swapDomElement.getAttribute(swapAddAttribute);
      const newAttributeValue = swapDomElement.getAttribute(
        swapAddAttributeValue
      );

      if (swapDomElement.hasAttribute(newAttribute)) {
        swapDomElement.removeAttribute(newAttribute);
      } else {
        swapDomElement.setAttribute(newAttribute, newAttributeValue);
      }
    });

    // REPLACE ATTRIBUTE VALUE
    document.querySelectorAll(`[${swapAttributeTarget}]`).forEach((swapDomElement) => {
      const attributeTarget = swapDomElement.getAttribute(
        swapAttributeTarget
      );
      let attributeValue = swapDomElement.getAttribute(attributeTarget);
      let newValue = swapDomElement.getAttribute(swapTargetValue);

      swapDomElement.setAttribute(attributeTarget, newValue);
      swapDomElement.setAttribute(swapTargetValue, attributeValue);
    });
  };

  document.querySelectorAll(`.${swapTrigger}`).forEach((switcherDomElement) => {
    switcherDomElement.addEventListener("click", swapAll);
  });
}

setupSwitcher();
</script>

Quick Grab

Quickly copy and paste the code crumbs into your project. If you are not familiar with how this snippet works then click the button below to view the full snippet page.

Save to Favorites

Learn How to Use This

<!-- FIND, STYLE AND REPLACE MATCHING STRINGS --> 
<script>
const targetStrings = [
  {
  	selector: 'h2',
    targetString: 'String 1',
    replacementString: 'String 1 replacement',
    appendedClassName: 'class-name-here',
  },
  {
  	selector: 'p',
    targetString: 'String 2',
    replacementString: 'String 1 replacement',
    appendedClassName: 'class-name-here',
  },
]

function wrapAndReplaceMatches(selector, newClass, wordTarget, replacement) {
  const pattern = new RegExp(`\\b(${wordTarget})\\b`, 'gi');
  const hasClassAttr = newClass ? `class=${newClass}` : ''
  const wrapAndReplace = !replacement
  ? `<span ${hasClassAttr}>$1</span>`
  : `<span ${hasClassAttr}>${replacement}</span>`;
  Array.from(document.querySelectorAll(selector)).forEach((element) => {
		element.innerHTML = element.innerHTML.replace(pattern, wrapAndReplace);
	});
}

document.addEventListener('DOMContentLoaded', () => {
  targetStrings.forEach(({
  	selector,
    targetString,
    replacementString,
    appendedClassName
  }) => {
    wrapAndReplaceMatches(selector, appendedClassName, targetString, replacementString)
  })
});
</script>

Quick Grab

Quickly copy and paste the code crumbs into your project. If you are not familiar with how this snippet works then click the button below to view the full snippet page.

Save to Favorites

Learn How to Use This

Know when new crumbs drop!

Never spam. Just honest updates about new snippets!

Text Replace

Know when new crumbs drop!

Want to contribute to the community?