javascript - Wrap every letter in a span by JS, But except some character, & they must be add with just first one letter?

Question

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 from his#Bicycle@His hometown surroun-near.

& After split charactors into span tag by JS, it looks like this: Okay

|A| |M|a|n| |W|a|l|k|s|-|3| |K|m |d|a|i|l|y| |f|r|o|m |h|i|s|#|B|i|c|y|c|l|e|@|H|i|s| |h|o|m|e|t|o|w|n| |s|u|r|r|o|u|n|-|n|e|a|r|.|

But i want to skip (-, #, @) to with just first one letter like after the split will be like :

|A| |M|a|n| |W|a|l|k|s-|3| |K|m |d|a|i|l|y| |f|r|o|m |h|i|s#|B|i|c|y|c|l|e@|H|i|s| |h|o|m|e|t|o|w|n| |s|u|r|r|o|u|n-|n|e|a|r.|

Here is my CodePen: https://codepen.io/rksbhl/pen/KKdOrbo

This is Complete code:

    <style>
        .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;
}
    </style>

<h1 class="rks1">A Man Walks-3 Km daily from his #Bicycle @His hometown surroun-near.</h1>

    <script type="text/javascript">    
        // Wrap every letter in a span
 var textWrapper = document.querySelector('.rks1');
textWrapper.innerHTML = textWrapper.textContent.replace(/(S*)/g, function(m) {
  return `<span class="word">`
    + m.replace(/S/g, "<span class='letter'>$&</span>")
    + `</span>`;
});
    </script>

i want this result as like this:

Answer 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 span
var 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;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>

<h1 class="rks1">A Man Walks-3 Km daily from his #Bicycle @His hometown surroun-near.</h1>