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)

所以目前，这个函数接受一个数组，split，然后使用我在字符串长度上迭代的setInterval方法。这允许文本看起来像被键入。

正如你所看到的，str的初始值是'var str =“让我们准备好Future！”;'

但是我想在我的str值中添加一个中断'var str =“让我们准备好未来！”'

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

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)

Answer 2

所以你想要插入HTML-Text中的换行符吗？

插入

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

Answer 3

检查以下代码段。 评论中的说明

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>

用JS插入HTML

3 个答案: