Javascript打印<br/>

Question

＆＃13;

＆＃13;

$(document).ready(function() {
var dataText = ["Text on line one <br /> Text on line 2"];
function typeWriter(text, i, fnCallback) {
if (i < (text.length)) {
document.querySelector(".animate").innerHTML = text.substring(0, i+1) +'<span aria-hidden="true"></span>';
setTimeout(function() {
typeWriter(text, i + 1, fnCallback)
}, 75);
}
else if (typeof fnCallback == 'function') {
}
}
function StartTextAnimation(i) {
if (typeof dataText[i] == 'undefined'){
setTimeout(function() {
StartTextAnimation(0);
}, 20000);
}
    if (i < dataText[i].length) {
      setTimeout(function() {
        typeWriter(dataText[i], 0, function(){
          StartTextAnimation(i + 1);
        });
      }, 1000);
    }
}
StartTextAnimation(0);
});

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

如你所见，＆＃34;＆lt;＆＃34;打印很短的时间，有什么办法可以防止这种情况发生吗？在HTML代码中添加中断并从JS代码中删除它不起作用

Answer 1

希望以下作品。更新了typeWriter函数中的代码。代码检查<br />的索引/位置并递增计数器，更新innerHTML然后再次调用typeWriter函数。

$(document).ready(function () {
	var dataText = ["Text on line one <br /> Text on line 2 <br /> Text on line 3"];

	function typeWriter(text, i, fnCallback) {
		if (i < (text.length)) {

			//Updated code starts here
			if (i == text.indexOf("<br />", i)) {
				i += "<br />".length;
				document.querySelector(".animate").innerHTML += "<br />";
			}
			else
				document.querySelector(".animate").innerHTML = text.substring(0, i + 1) + '<span aria-hidden="true"></span>';
			//Updated code ends here

			setTimeout(function () { typeWriter(text, i + 1, fnCallback) }, 75);
		}
		else if (typeof fnCallback == 'function') { }
	}

	function StartTextAnimation(i) {
		if (typeof dataText[i] == 'undefined') {
			setTimeout(function () {
				StartTextAnimation(0);
			}, 20000);
		}
		if (i < dataText[i].length) {
			setTimeout(function () {
				typeWriter(dataText[i], 0, function () {
					StartTextAnimation(i + 1);
				});
			}, 1000);
		}
	}
	
	StartTextAnimation(0);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<p class="animate"></p>

Answer 2

你会逐一获得角色，

text.substring(0, i+1)

所以首先添加<，然后b再添加r，最后添加>

当你可以做的时候，设置一个条件，当你找到像<这样的特殊字符时，你会立刻阅读所有字符，直到封闭的>

所以，例如，这可行：

$(document).ready(function() {
var dataText = ["Text on line one <br> Text on line 2"];
function typeWriter(text, i, fnCallback) {
if (i < (text.length)) {
if (text.charAt(i) === '<') {
  // Get the index of the enclosing > tag
  var tempIndex = text.indexOf('>', i);
  // Add all the code from the < until the enclosing >
  var textToAdd = text.substr(i, tempIndex + 1);
  i = tempIndex;
} else {
  // If the character isn't a < just do the operation normally
  textToAdd = text.substring(0, i +1);
}
document.querySelector(".animate").innerHTML = 
textToAdd +'<span aria-hidden="true"></span>';
setTimeout(function() {
typeWriter(text, i + 1, fnCallback)
}, 75);
}
else if (typeof fnCallback == 'function') {
}
}
function StartTextAnimation(i) {
if (typeof dataText[i] == 'undefined'){
setTimeout(function() {
StartTextAnimation(0);
}, 20000);
}
    if (i < dataText[i].length) {
      setTimeout(function() {
        typeWriter(dataText[i], 0, function(){
          StartTextAnimation(i + 1);
        });
      }, 1000);
    }
}
StartTextAnimation(0);
});

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