使用javascript将带有类名的span添加到字符串的某些字符

大家好，我有一个ascii图像

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

\uu
（c） .-（c）
/ ._. \   
__\（P）/（u）
（。-/'L'\-.）
||A | |
_“Y”
(.-./`-'\.-.)
`-'     `-' 

我使用以下函数将每个字符包装成一个跨距

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

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

const bear=document.querySelector（“.bear”）
bear.innerHTML=sparanWrap（bear.textContent）
const sparanWrap=（word）=>{
return[…word].map（（字母）=>`${letter}`）。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> 

P
L
A.
Y

我猜我应该在这里使用过滤器，但不太确定如何做到这一点

---

提前谢谢

谢谢安德烈亚斯的提示，一个三元运算符工作了

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

constsparanwrap=（word）=>{
返回[…字]
.map（（字母）=>{
回信==='P'||
字母=='L'||
字母=='A'||
字母=='Y'
？`${字母}`
：`${letter}`
})
.加入（“”）
}

首先，我想指出，因为您将函数分配给了

常量，所以它不会被提升，因此在声明它之前不能调用它。如果出于任何原因需要在之后声明，请使用
函数
关键字

工作示例
在本例中的ASCII艺术中，只有大写字母具有不同的类，因此您可以使用简单的正则表达式，例如
/[a-Z]/
来测试每个字母：

const bear=document.querySelector（“.bear”）
bear.innerHTML=sparanWrap（bear.textContent）
函数sparanWrap（word）{
//定义帮助函数以识别大写字母
让applyClass=letter=>/[A-Z]/.test（letter）？'class=“play”：'
//在模板字符串中应用函数
return[…word].map（（字母）=>`${letter}`）。join（“”）
}

编辑：我意识到原始尖括号可能是个坏主意-虽然这是
前的
标记，但如果是其他标记，可能会导致浏览器将其解释为一个打开的HTML标记

然而，这在ASCII art中不加选择地使用几乎是不安全的。如果，通过任何方式，您希望在艺术中替换的字母也显示为艺术的部分（例如，如果耳朵中的
c
是大写的），我建议您将字母包装在特定的标记中（如用于HTML注释的字母：
），然后您可以将它们包含在正则表达式中，像这样：

//
只需检查
字母
是否是您的“特殊”字符之一，并返回另一个字符串。使用示例中的'if``语句？获得它感谢hintA非常优雅的解决方案，它帮助我理解正则表达式的功能，谢谢
Regexp.prototype.test（）
方法将字符串作为参数，如果传递的字符串与正则表达式中的模式匹配，则返回
true
。你可以阅读完整的文档。你是对的，正则表达式非常强大，但是每种语言在实现正则表达式的方式上可能有所不同。例如，JS过去常常缺少lookbehind，但它似乎正在慢慢实现。这里有一些关于HackerRank的练习，可以帮助你完成基础知识。谢谢你指出HackerRank。看起来像一个有用的学习工具，包括（字母）