JavaScript - 如何逐个字符显示文本

Question

我正在尝试使用 JavaScript 逐个字符地显示从数组中获取的文本。我已经设法用阵列的一部分来做到这一点。我找不到换行并显示其余部分的方法。

var container = document.getElementById("container");

var notes = [
{scenario: 1, intro: "This is the introduction.", que: "What is the weight of ....?"},
{scenario: 2, intro: "This is the second scen.", que: "What is the second law of ...?"},
{scenario: 3, intro: "This is the third thing.", que: "What is the third law of ...?"},
];


function splTxt(txt) {
    // Split string into characters                                                                                                                                           
    t = txt.split('');
return t
}

function terminal(cl, i) {
// Create a div element and display message                                                                                                                               
var div = document.createElement('div');
div.className = cl;
container.appendChild(div);

// Take the first element of the array                                                                                                                                    
// and extract the intro string                                                                                                                                           
var txt = splTxt(notes[0].intro);
var i = 0;

// Display text, character by character                                                                                                                                   
var display = setInterval(function() {
    div.textContent += txt[i];
    if (i == (txt.length-1)) {
        clearInterval(display);
    }
    i += 1
}, 100);

}

terminal('blueTh', 0);

显示后notes[0].intro，我希望它换行并显示notes[0].que。

我试过做

var txt = splTxt(notes[0].intro + '<br />' +  notes[0].que);

但显然，它只是<br />在同一行上显示和打印两条消息。

Answer 1

您有两个选择：

• 插入<br />并告诉浏览器将其解析为 HTML。

  您可以通过使用innerHTML属性而不是来做到这一点textContent。

  这将允许您使用HTML之类的东西<br />，但你必须逃跑&，<，>当他们应该是纯文本。如果您不信任文本，请不要这样做。

  var container = document.getElementById("container");
  var notes = [
    {scenario: 1, intro: "This is the introduction.", que: "What is the weight of ....?"},
    {scenario: 2, intro: "This is the second scen.", que: "What is the second law of ...?"},
    {scenario: 3, intro: "This is the third thing.", que: "What is the third law of ...?"}
  ];
  function terminal(cl, i) {
    var div = document.createElement('div');
    div.className = cl;
    container.appendChild(div);
    var txt = [notes[0].intro, notes[0].que].join('\n').split('');
    var i = 0;
    (function display() {
      if(i < txt.length) {
        div.innerHTML += txt[i].replace('\n', '<br />');
        ++i;
        setTimeout(display, 100);
      }
    })();
  }
  terminal('blueTh', 0);

  <div id="container"></div>

• 插入一个换行符并告诉浏览器正确显示它。

  在 HTML 中，空白字符默认折叠。您可以通过将white-spaceCSS 属性设置为pre、pre-wrap或来更改此行为pre-line。例如，white-space: pre保留所有空格并且不换行文本。

  var container = document.getElementById("container");
  var notes = [
    {scenario: 1, intro: "This is the introduction.", que: "What is the weight of ....?"},
    {scenario: 2, intro: "This is the second scen.", que: "What is the second law of ...?"},
    {scenario: 3, intro: "This is the third thing.", que: "What is the third law of ...?"}
  ];
  function terminal(cl, i) {
    var div = document.createElement('div');
    div.className = cl;
    container.appendChild(div);
    var txt = [notes[0].intro, notes[0].que].join('\n').split('');
    var i = 0;
    (function display() {
      if(i < txt.length) {
        div.textContent += txt[i];
        ++i;
        setTimeout(display, 100);
      }
    })();
  }
  terminal('blueTh', 0);

  #container {
    white-space: pre-line;
  }

  <div id="container"></div>