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

Question

大家好，我有一个ascii图像。

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

我正在使用以下函数用一个跨度包装每个字符

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艺术中很难不加区分地使用。如果无论如何，你想在艺术中替换的字母也显示为艺术的部分(例如，如果耳朵中的c是大写的(，我建议你用一些特定的标记来包装字母(比如用于HTML注释的标记：<!--和-->(，然后你可以把它们包括在你的Regex中，就像这样：

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

Answer 2

感谢Andreas的提示，一个三元运算符工作于

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