Добавление span с именем класса к определенным символам строки с javascript

Question

Привет всем, у меня есть изображение ascii.

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

Я обертываю каждый символ диапазоном, используя следующую функцию

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

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

Изображение ascii содержит символы 'P', 'L', 'A', 'Y', которые я хотел бы обернуть с другим диапазоном:

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

Я предполагаю, что я должен использовать фильтр здесь, но не совсем уверен, как это сделать?

Заранее спасибо

Answer 1

Во-первых, я хотел бы отметить, что, поскольку вы назначили свою функцию на const, она не будет поднята, и поэтому вы не можете вызвать ее до объявления ее . Если вам необходимо объявить его впоследствии по какой-либо причине, используйте ключевое слово function.

Рабочий пример

В примере ASCII в этом примере только заглавные буквы будут иметь другой класс так что вы можете использовать простое регулярное выражение , например /[A-Z]/, для проверки каждой буквы:

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('')

}

Редактировать: Я понял необработанные угловые скобки может быть плохой идеей - хотя это тег pre, если бы он был чем-то еще, он мог бы заставить браузер интерпретировать его как открывающий тег HTML.

Это, однако, вряд ли безопасно для неизбирательного использования в искусстве ASCII. Если каким-либо образом буквы, которые вы хотите заменить в искусстве, также отображаются как part искусства (например, если c в ушах были в верхнем регистре), я бы предложил вам обернуть буквы в какой-то определенной c маркировке (например, используемые для HTML комментариев: <!-- и -->), тогда вы можете включить их в свое регулярное выражение, например:

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

Answer 2

Спасибо Андреас за подсказку, сработал троичный оператор

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('')
    }