将文本拆分为单个单词,每个单独一行,用javascript
问题描述:
我编写了此代码,并将javascript合并到html中,以便将输入区域中输入的文本拆分为单个单词,每个单独一行:将文本拆分为单个单词,每个单独一行,用javascript
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而不是仅仅只作为控制台日志?
我试了突出显示的代码的形象,但不工作:(
感谢所有帮助
答
这应该工作
x.innerHTML = MyVar.value.replace(/ /g, "<br />");
答
你在你的函数名一个错字:中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>
功能是有趣的熟悉:
答
使用<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>
答
由于浏览器不关心\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>
答
可以使用<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>
将'\ n'替换为'
'? –
仅供参考结束''标签是不必要的,可以省略。如果你正在处理XHTML,只需在“输入”标签的最后一个括号(例如'')上添加一个正斜杠即可。 – reformed