将文本拆分为单个单词，每个单独一行，用javascript

Question

我编写了此代码，并将javascript合并到html中，以便将输入区域中输入的文本拆分为单个单词，每个单独一行：

function convertToWords() { 
 

 
    var MyVar; 
 

 
    MyVar = document.getElementById("demo"); 
 

 
    console.log(MyVar.value.replace(/ /g, "\n")); 
 

 
    var x = document.getElemenyById("myDiv"); 
 

 
    x.innerHTML = MyVar.value.replace(/ /g, "\n"); 
 

 
}

<input type="text" value="" id="demo" style="width:100%; height:100px"> 
 
</input> 
 

 
<input type="button" value="Convert to single words" onclick="convertToWords();"> 
 
</input> 
 

 
<br> 
 

 
<div id="myDiv"></div>

我的问题，如何让结果在HTML例如在一个div而不是仅仅只作为控制台日志？

我试了突出显示的代码的形象，但不工作:(

感谢所有帮助

Answer 1

这应该工作

x.innerHTML = MyVar.value.replace(/ /g, "<br />"); 

Answer 2

你在你的函数名一个错字：中getElementById代替getElemenyById也为其他人建议，你可以使用一个<br>把它放在一个新的生产线。

但是看看这个解决方案，它采用更稳健的编码。

• \s作为正则表达式，它分割所有空格。使用这个网站很好的参考 http://www.regular-expressions.info/tutorial.html和https://regex101.com/来测试你的正则表达式。
• split，它将单词转换为数组。所以你可以用它做各种技巧。
• 然后在循环中，我们构建块级（div）元素（默认放置在一个新行上）并将它们附加到结果div。使用

//lets improve this: use eventlisteners instead of inline events 
 
document.querySelector("input[type='button']").addEventListener("click", convertToWords, false); 
 
//using document.querySelector to select the input button based on its node name and type. 
 
// then add a click event to it that refers to convertToWords. 
 

 

 
function convertToWords() { 
 

 
    var MyVar; 
 

 
    MyVar = document.getElementById("demo"); 
 

 
    var resultDiv = document.getElementById("myDiv"); //try to use descriptive names. 
 

 
    // the use of <br> is not really nice, it works, but this is cleaner 
 
    var wordArray = MyVar.value.split(/\s/); //using \s to split on all white spaces 
 
    wordArray.forEach(function(element){ 
 
    //loop over every entry in the array using foreach 
 
    var node = document.createElement("div"); //create a block node element; 
 
    node.textContent = element; //fill div with the text entry. 
 
    resultDiv.appendChild(node); //set node to the result div 
 
    }); 
 

 
}

<input type="text" value="" id="demo" style="width:100%; height:100px" /> 
 

 
<input type="button" value="Convert to single words" /> 
 

 
<br> 
 

 
<div id="myDiv"></div>

功能是有趣的熟悉：

• document.querySelector
• Array.prototype.forEach
• document.createElement
• addEventListener

Answer 3

使用<br>，而不是\n打破行HTML。

function convertToWords() { 
 
    var MyVar = document.getElementById("demo"); 
 
    //console.log(MyVar.value.replace(/ /g, "\n")); 
 
    var x = document.getElementById("myDiv"); 
 
    x.innerHTML = MyVar.value.replace(/ /g, "<br>"); 
 
}

<input type="text" value="" id="demo" style="width:100%; height:100px"> 
 
<input type="button" value="Convert to single words" onclick="convertToWords();"> 
 
<br > 
 
<div id="myDiv"></div>

Answer 4

由于浏览器不关心\n，你可以替换休息的比赛（的空间）。

document.getElementById("input").addEventListener('keyup', function(e) { 
 
    document.getElementById("output").innerHTML = e.target.value.replace(/\s/g, "<br/>"); 
 
});

<input type="text" id="input"> 
 
<div id="output"></div>

Answer 5

可以使用<br>代替\n

function convertToWords() { 
 

 
    var MyVar; 
 

 
    MyVar = document.getElementById("demo"); 
 

 

 
    var x = document.getElementById("myDiv"); 
 

 
    x.innerHTML = MyVar.value.replace(/ /g, "<br/>"); 
 

 
}

<input type="text" value="" id="demo" style="width:100%; height:100px"> 
 
</input> 
 

 
<input type="button" value="Convert to single words" onclick="convertToWords();"> 
 
</input> 
 

 
<br> 
 

 
<div id="myDiv"></div>