Adding span with class name to certain characters of a string with javascript

Question

Hello all I have an ascii image.

<pre class="bear">   _     _   
  (c).-.(c)  
   / ._. \   
 __\( P )/__ 
(_.-/'L'\-._)
   || A ||   
 _.' `Y' '._ 
(.-./`-'\.-.)
 `-'     `-' </pre>

I am wrapping each character with a span using the following function

const bear = document.querySelector('.bear')
bear.innerHTML = sparanWrap(bear.textContent)

const sparanWrap = (word) => {
return [...word].map((letter) => `<span>${letter}</span>`).join('')
}

The ascii image contains the characters 'P','L','A','Y' which I would lke to wrap with a different span:

<span class="play">P</span>
<span class="play">L</span>
<span class="play">A</span>
<span class="play">Y</span>

I'm guessing I should be using filter here but not quite sure how to do that?

Thanks in advance

Just check if letter is one of your "special" characters and return a different string. — Andreas
– Andreas, Commented Mar 15, 2020 at 17:24

gyohza · Accepted Answer · 2020-03-19 20:34:11Z

1

First I would like to point out that because you assigned your function to a const, it will not get hoisted and therefore you cannot call it before declaring it. If you need it to be declared afterwards for whatever reason, use the function keyword instead.

Working example

In the ASCII art in the example, only uppercase letters will have a different class, so you could use a simple Regular Expression such as /[A-Z]/ to test each letter:

const bear = document.querySelector('.bear')
bear.innerHTML = sparanWrap(bear.textContent)

function sparanWrap(word) {

  // define helper function to identify uppercase letters
  let applyClass = letter => /[A-Z]/.test(letter) ? ' class="play"' : ''

  //apply function inside template string
  return [...word].map((letter) => `<span${applyClass(letter)}>${letter}</span>`).join('')

}

Edit: I realized raw angle brackets could be a bad idea - although this is a pre tag, if it were anything else it might have caused the browser to interpret it as an opening HTML tag.

This, however, is hardly safe for indiscriminate use in ASCII art. If, by any means, the letters which you want to replace in the art also appear as part of the art (for example, if the c in the ears were uppercase), I would suggest you wrap the letters in some specific marking (like the ones used for HTML comments: ), then you could include them in your Regex, like so:

/<!--[A-Z]-->/

edited Mar 19, 2020 at 20:34

answered Mar 15, 2020 at 17:53

gyohza

8561 gold badge8 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

James Over a year ago

A very elegant solution and It has helped me understand the capabilities of Regular Expressions, thank you

gyohza Over a year ago

The Regexp.prototype.test() method takes a string as an argument and returns true if the string passed matches the pattern from the regex. You can read the full docs here.

gyohza Over a year ago

And you're right, regular expressions can be really powerful, but each language may vary on the way they implement regex. JS, for example, used to lack lookbehinds, but it seems it's slowly being implemented. There are a few exercises on HackerRank that can get you through with the basics.

James Over a year ago

Thanks for pointing out HackerRank. Looks like a useful learning tool

James · Accepted Answer · 2020-03-15 17:42:28Z

0

Thank you Andreas for the hint, a ternary operator worked

const sparanWrap = (word) => {
        return [...word]
            .map((letter) => {
                return letter === 'P' ||
                    letter === 'L' ||
                    letter === 'A' ||
                    letter === 'Y'
                    ? `<span class="word">${letter}</span>`
                    : `<span>${letter}</span>`
            })
            .join('')
    }

answered Mar 15, 2020 at 17:42

James

1,4855 gold badges18 silver badges47 bronze badges

1 Comment

Andreas Over a year ago

["P", "L", "A", "Y"].includes(letter) ? ... : ...

Collectives™ on Stack Overflow

Adding span with class name to certain characters of a string with javascript

2 Answers 2

Working example

4 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Working example

4 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related