Match Highlight

<div class="nuda-matchhl">
  <div class="nuda-matchhl__item">
    <span class="nuda-matchhl__m">pri</span>cing tables
  </div>
  <div class="nuda-matchhl__item">
    <span class="nuda-matchhl__m">pri</span>vate route
  </div>
  <div class="nuda-matchhl__item">
    <span class="nuda-matchhl__m">pri</span>mary button
  </div>
</div>

// Wrap every occurrence of `query` in a match span
function highlight(text, query) {
  if (!query) return text;
  const re = new RegExp('(' + query.replace(/[.*+?^${}()|[\]\\]/g, '\\$&') + ')', 'gi');
  return text.replace(re, '<span class="nuda-matchhl__m">$1</span>');
}

// Example
document.querySelectorAll('.nuda-matchhl__item').forEach(el => {
  el.innerHTML = highlight(el.textContent, 'pri');
});

.nuda-matchhl {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 6px;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: 10px;
  width: 100%;
  max-width: 220px;
}

.nuda-matchhl__item {
  padding: 7px 10px;
  color: #a0a0a8;
  font-size: 12px;
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s;
}

.nuda-matchhl__item:hover {
  background: rgba(255,255,255,.04);
}

.nuda-matchhl__m {
  color: #e4ff54;
  font-weight: 700;
  background: rgba(228,255,84,.12);
  padding: 0 2px;
  border-radius: 3px;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  animation: _hlPulse 2s ease-in-out infinite;
}

@keyframes _hlPulse {
  0%,100% {
    background: rgba(228,255,84,.12);
  }
  50% {
    background: rgba(228,255,84,.22);
  }
}

@media (prefers-reduced-motion:reduce) {
  .nuda-matchhl__m {
    animation: none;
  }
}