將文本拆分爲單個單詞，每個單獨一行，用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>