将带有 class 名称的跨度添加到带有 javascript 的字符串的某些字符

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

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

Answer 2

首先我想指出，因为您将函数分配给了 const，它不会被提升，因此 您不能在声明它之前调用它 .如果出于任何原因需要在之后声明它，请改用 function 关键字。

工作示例

在示例中的 ASCII 艺术中，只有大写字母会有不同的 class，因此您可以使用简单的 正则表达式 例如 /[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 评论的那些：），然后您可以将它们包含在您的正则表达式中，如下所示：

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

将带有 class 名称的跨度添加到带有 javascript 的字符串的某些字符

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

javascript

ascii

工作示例