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?