Question

我编写了这段代码，并在html中加入了javascript，以便将输入区域中输入的文本拆分为单个单词，每个单词都在一行中：

＆＃13;

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");

}

＆＃13;

<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>

＆＃13;

我的问题，如何将结果放在html中，例如在div中，而不仅仅作为控制台日志？

我尝试了图片中突出显示的代码，但不起作用：（

感谢您的帮助

Answer 1

您的功能名称中有一个拼写错误：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>

熟悉的有用的函数：

Answer 2

您可以使用<br>代替\n

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 3

使用<br>代替\n来破解html中的行。

＆＃13;

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>");
}

＆＃13;

<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>

＆＃13;

Answer 4

由于浏览器并不关心\n，您可以用中断替换匹配（空格）。

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 5

这应该有效

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

使用javascript

5 个答案: