Question

我制作了一个函数，可以将一个字母一个字母地键入.html

var i = 0;
text = "lorem ipsum" + "</br>" + "lorem ipsum";
function type_it() {
if (i < text.length) {
    info_text.innerHTML += text.charAt(i);
    i++;
    setTimeout(type_it, 50);
    }
}

当前输出为“ lorem ipsum <\ br> lorem ipsum”
我需要的时候
“ lorem ipsum。
lorem ipsum”。
问题是我无法使用<\br>或\n来中断文本行。该函数将其键入为字符串，并且不会将其插入DOM

Answer 1

使用标签编写每个段落。
因此您不必使用 标签。

Answer 2

您可以使用white-space: pre允许换行符（\n）在HTML中生效：

var i = 0;
var info_text = document.getElementById('foo')
text = "lorem ipsum\nlorem ipsum";
function type_it() {
if (i < text.length) {
    info_text.innerHTML += text.charAt(i);
    i++;
    setTimeout(type_it, 50);
    }
}

type_it()

#foo {white-space: pre;}

<div id="foo"></div>

...，但这只会允许您插入换行符，而不能插入任何其他HTML格式。

或者，您可以修改脚本以一次插入整个标签（ ），而不是一次插入一个字符。

这是必要的，因为要防止浏览器将部分标签显示为文本：例如，“ <b”将显示<，直到将右括号写入为止。

此外，当逐步添加html时，浏览器似乎只解释刚刚完成写入的标签；它不会返回并重新解释已经插入的内容-因此，例如，如果您的字符串包含bold，并且您一次向innerHTML添加一个字母或标记，则标记不会可见，但粗体都不可见。

通过在每次迭代中替换元素的全部内容而不是每次都添加一个字符来轻松解决此问题；这样浏览器在每一步都将完整字符串解释为html。

var i = 0;
var info_text = document.getElementById('foo')
text = "lorem ipsum<br>lorem ipsum<p>more <b>tags, just <i>to</i></b> test</p><ul><li>one</li><li>two</li><li>three</li></ul>";

function type_it() {
  if (i < text.length) {
if (text.charAt(i) === '<') {
  // we've found a tag; find out how many characters it consists of 
  i = i + text.substr(i).indexOf('>') + 1
} else {
  // it's text, add a single character
  i++;
}
info_text.innerHTML = text.substring(0, i); 
setTimeout(type_it, 50);
  }
}

type_it()

<div id="foo"></div>

（顺便说一句，我想指出不是正确的HTML；您可能会误记XML样式的自动关闭标签 ，但对于HTML5也不正确。这两个错误是无害的，但理想情况下，您将使用正确的 。）

Answer 3

这对我有用。

var i = 0;
var text = "test";
var info_text = document.getElementById("info_text");

function type_it() {

if (i < text.length) {
    info_text.innerHTML += "<div>" + text.charAt(i) + "</div>";
    i++;
    setTimeout(type_it, 50);
    }
}

type_it();

<div id="info_text"></div>

没有<br/>或\ n的HTML换行符？

3 个答案: