Solution for hyphen word

Question

I am wondering about this case: Is it possible to do something like that? if word, for example co-worker is hyphen, jquery can take detect and take word and replace with class inside? Example: <span class="hyphenated-word">co-worker</span> I think something about preg.replace function, but not sure how to detect word. Can anybody give me a tip for this?

Answer 1

You could use a regex to detect any hyphenated word:

function highlightHyphenated(element) {
  // Regular expression matching any group composed by:
  //   - `[A-Za-zÀ-ÖØ-öø-ÿ]+` one or more letters (including accented ones), followed by
  //   - `-` a hyphen, followed by
  //   - `[A-Za-zÀ-ÖØ-öø-ÿ]+` one or more letters (including accented ones)
  const re = /([A-Za-zÀ-ÖØ-öø-ÿ]+-[A-Za-zÀ-ÖØ-öø-ÿ]+)/gim; 
  if (re.test(element.innerText)) {
    element.innerHTML = element.innerHTML.replace(re, '<span class="hyphenated">$1</span>');
  }
}

document.querySelectorAll('p').forEach(el => highlightHyphenated(el));

.hyphenated {
  display: inline-block;
  background-color: yellow;
  font-weight: bold;
}

<p>Lorem ipsum dolor sit-amet, consectetur adipiscing elit. Etiam orci tortor, aliquet quis mollis in, posuere id ipsum. Vestibulum quis nibh augue. Sed id congue ex. Suspendisse eget elit fringilla, commodo mi vitae, luctus odio. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque cursus quam vitae leo eleifend, a laoreet neque varius. Morbi quis posuere risus, at scelerisque dui. Morbi sit amet lorem purus. Pellentesque auctor ut libero sed tempor. Integer vitae erat id leo porttitor blandit. Duis cursus lacus quis mauris facilisis, dapibus auctor nisl feugiat. Donec consectetur dolor eu suscipit aliquam. Fusce magna ante, luctus a arcu at, volutpat blandit tortor. Vivamus bibendum sem id mauris dapibus, et ultricies elit fermentum. Aliquam eu efficitur ipsum. Pellentesque eu velit ipsum.</p>

<p>Sed-fermentum lorem a ipsum sodales, vel vestibulum odio hendrerit. Aenean auctor ipsum in urna finibus, eu vulputate massa rutrum. Curabitur id eros pulvinar, dapibus justo nec, euismod sem. Ut ornare turpis velit, non aliquet est rhoncus eu. Etiam ex dolor, congue eleifend nisl eget, tempus dictum nulla. Integer ultricies enim eu mattis sagittis. Aliquam malesuada condimentum semper. Aliquam erat volutpat. Integer in dapibus sapien, tempor venenatis nisi. Curabitur eget sapien vitae nisi pulvinar volutpat aliquet ut augue. Cras pretium congue est, at pulvinar velit egestas vitae. Pellentesque non dui et urna posuere mattis.</p>

<p>Fusce consectetur vel purus a rutrum. Nulla vitae-metus nec eros facilisis porta. Ut quis sem ac nibh finibus porta egestas ac neque. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Quisque sagittis nisl ante, vel placerat dui fermentum eu. Quisque placerat placerat neque. Nullam vel euismod nisl. Nullam aliquet enim vitae odio ultricies tincidunt. Nullam sagittis arcu at eleifend commodo. In hac habitasse platea dictumst. Nunc nibh lacus, pharetra nec sapien quis, congue pharetra felis. Vivamus porta, ex et convallis sagittis, ex dui porttitor augue, et tempus neque risus quis diam. Morbi eget leo lectus.</p>

<p>Sed at justo euismod, luctus lorem ut, dignissim libero. Curabitur vel auctor neque, vel ultrices nulla. Duis in aliquet-ligula. Aliquam sed est nisl. Aliquam enim orci, congue eget erat sed, imperdiet pharetra est. Fusce efficitur a tortor-nec fringilla. Sed sed tempus tellus, efficitur ornare lorem. Proin risus sem, mollis et lectus nec, rhoncus accumsan magna. Mauris hendrerit ligula eu est pretium, id bibendum ante tincidunt. Nam cursus vehicula diam, in eleifend magna blandit at. Vestibulum sit amet bibendum elit.</p>

<p>Donec magna est, placerat in vehicula eget, convallis non metus. Proin posuere ultricies neque a scelerisque. Quisque eu ex quis magna varius-vulputate. Sed venenatis dapibus iaculis. Cras lacinia ex et ante mollis, et condimentum ante porta. Sed tempus diam at fringilla condimentum. Aenean est ex, sollicitudin at blandit ac, dapibus eu mauris. Sed a tincidunt arcu. Maecenas sagittis cursus eros, ut commodo neque maximus id. Aenean accumsan purus eu tortor eleifend, vel volutpat turpis tempus. Vestibulum et metus non eros rhoncus placerat. Donec congue enim libero. Cras placerat, urna eu tincidunt aliquam, nisl odio viverra felis, id volutpat ipsum libero a leo.</p>

If you do not care about accented letters, you can replace [A-Za-zÀ-ÖØ-öø-ÿ]+ with [A-Za-z]+