Wrap Every Letter In A Span By Js, But Except Some Character, & They Must Be Add With Just First One Letter?

i want to Wrap every letter in a span, But except some character (#, -, @,), But they must be add with just first one letter? For Examplet my line is : A Man Walks-3 Km daily fro

Solution 1:

You can change your inner regex from \S to \S(-|#|@)? to also take an optional char that is -, # or @ (or any more you want to add, separated with |)

Before that though, you want to catch space+char and swap them to make them move from the previous word with something like .replace(/ (-|#|@){1}/g, s => s[1]+s[0])

// Wrap every letter in a spanvar textWrapper = document.querySelector('.rks1');

textWrapper.innerHTML = textWrapper.textContent.replace(/ (-|#|@){1}/g, s => s[1]+s[0]).replace(/(\S*)/g, m => {
  return`<span class="word">` +
    m.replace(/\S(-|#|@)?/g, "<span class='letter'>$&</span>") +
    `</span>`;
});

.rks1 {
  font-weight: 900;
  font-size: 2.5em;
  font-family: rr;
}

.rks1.letter {
  display: inline-block;
  line-height: 1em;
  border: 1px solid gray;
}

.word {
  background-color: #CFF;
  white-space: nowrap;
}

.span {
  border: 1px solid red;
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script><h1class="rks1">A Man Walks-3 Km daily from his #Bicycle @His hometown surroun-near.</h1>

Version 2 as requested:

// Wrap every letter in a spanvar textWrapper = document.querySelector('.rks1');

textWrapper.innerHTML = textWrapper.textContent.replace(/(\S*)/g, m => {
  return`<span class="word">` +
    m.replace(/(-|#|@)?\S(-|#|@)?/g, "<span class='letter'>$&</span>") +
    `</span>`;
});

.rks1 {
  font-weight: 900;
  font-size: 2.5em;
  font-family: rr;
}

.rks1.letter {
  display: inline-block;
  line-height: 1em;
  border: 1px solid gray;
}

.word {
  background-color: #CFF;
  white-space: nowrap;
}

.span {
  border: 1px solid red;
}

<scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script><h1class="rks1">A Man Walks-3 Km daily from his #Bicycle @His hometown surroun-near.</h1>