Question

我正在尝试将字符串转换为字母数组，但仅使用JavaScript（无jQuery）

到目前为止，我已经解决了这个问题，但是我知道我想念的更多了，我知道有jQuery可以解决，但是我想了解有关香草JS的更多信息

function myFunction() {
    var str = 'Test';
    var split = str.split("");
    document.getElementById('demo').innerHTML = '<span class="test">' + split + '</span>';
}
myFunction()

Answer 1

您是如此接近答案，只需要遍历数组即可：

function myFunction() {
    var str = 'Test';
    var split = str.split("");
    var html = '';
    for(let i = 0; i < split.length; i++) {
        html += '<span class="test">' + split[i] + '</span>';
    }
    document.getElementById('demo').innerHTML = html;
}
myFunction()

Answer 2

您可以通过mapping到span元素的每个字母然后joining的结果来构造所需的html字符串：

function myFunction() {
    var str = 'Test';
    var split = str.split("");
    document.getElementById('demo').innerHTML = split.map(letter => `<span class="test">${letter}</span>`).join('');
}
myFunction()

<div id="demo"></div>

Answer 3

尝试一下

function myFunction() {
    var str = 'Test';
    var split = str.split('');
      split.forEach((e)=>{
   var span= document.createElement("span"); 
   var textnode = document.createTextNode(e);
   span.appendChild(textnode);document.getElementById("demo").appendChild(span); 
    })

}
myFunction()

检查fiddle

Answer 4

您可以通过将字符串字符散布到一个数组中，然后在整个数组中进行映射，将包裹在"e"标签中的每个字符span推到{{1} } div元素，使用#demo属性，如下所示：

innerHTML

检查并运行以下代码段，以获取上述示例：

[...str].map(e => document.getElementById('demo').innerHTML += `<span class="test">${e}</span>`;

/* JavaScript */
function myFunction(str) {
    [...str].map(e => document.getElementById('demo').innerHTML += `<span class="test">${e}</span>`
)}

myFunction("Test");
myFunction("Hello");

/* CSS */
.test {display: block; background-color: green; margin: 5px 0px;text-align:center; font-size: 20px;}

将字符串转换为字母数组，然后输出每个SPAN

4 个答案: