使用JS插入HTML

Question

目前我有一些关于代码的疑问，以下是代码，它能够正常工作，但我想对它进行一些小修改，使得这个函数可以在文本中插入html标记，例如：

var str = "Let's get Future Ready!";
var split = str.split("");
var counter = 0;

var SI = setInterval(function() {

    var typeText = $('.typetext');
    typeText.append(split[counter]);
    counter++
    if(counter == str.length){clearInterval(SI)}

},100)

目前，这个函数接受一个数组，将其分割，然后使用setInterval方法迭代字符串长度。这使得文本看起来像是正在打字。

但是，您可以看到，我的初始值str是'var str =“让我们准备未来！”'。

然而，我想在我的str值中添加一个断点'var str ="让我们
准备未来！"'

首先，它是否可能？其次，如果有人能给我一些建议，我将不胜感激，谢谢。

- Troy

Answer 1

我的建议是在循环时用<br>替换|字符。请在这里查看：https://jsfiddle.net/s04zbfcc/

var str = "Let's get|Future Ready!";
var split = str.split("");
var counter = 0;

var SI = setInterval(function() {

    var typeText = $('.typetext');

    typeText.append(split[counter] == '|' ? '<br>' : split[counter]);
    counter++

    if(counter == str.length) {
        clearInterval(SI)
    }

},100)

- Martin Gottweis

---

谢谢您的反馈，我很感激。我使用了juli0r的方法，因为它是最方便的。谢谢！ - Troy

这样做要好得多，因为您不再依赖于要显示的字符串。 - user3136777

问题是如果文本发生了变化会发生什么？或者如果你想要换两行。投资于良好、可维护和灵活的代码始终是一个好主意。 - Martin Gottweis

哦，哇，我刚刚才意识到这一点。这真是太棒了哈哈。谢谢！ - Troy

Answer 2

检查下面的代码片段。 注释中有解释

var str = "Let's get Future Ready!";
var split = str.split("");
var counter = 0;

var SI = setInterval(function() {

    var typeText = $('.typetext');
    typeText.append(split[counter]);
    counter++
    if(typeText.text()=="Let's get")//check the text and see if it  has Let's get
      typeText.append("<br/>");//if yes append br there
    if(counter == str.length){
      clearInterval(SI);
    }

},100)

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="typetext"></div>

- Guruprasad J Rao

---

嘿，感谢您的反馈，大家提出的所有方法似乎都适用于我的情况！再次感谢。 - Troy

Answer 3

您想在插入的HTML文本中换行吗？

插入一个

<br />

在您想要打断文本的位置将其插入到数组中。要向数组中插入元素，请查看javascript的splice()函数： http://www.w3schools.com/jsref/jsref_splice.asp 使用您的代码进行示例：

var str = "Let's get Future Ready!";
var split = str.split("");
var counter = 0;
split = split.splice(18, 0, "<br />");

- juli0r

---

嘿juli0r，那是正确的。目前它在一行上读取整个文本，这正是我想要的。但现在我想在“get”之后并在“Future”之前添加一个<br/>，以便它在新行上输入。这可能吗？谢谢。 - Troy

我编辑了我的帖子。我相信你要找的是Array.splice()。你可以在指定的索引处轻松地向数组中添加一个元素。 - juli0r

谢谢您的帮助，juli0r +1 - Troy