打字动画中<br>标签渲染前显示<字符的问题求助

Hey there! The issue you're seeing is because you're typing out the HTML entity <br> character by character. As each character is added, the browser parses < into a literal < and displays it immediately—only once the full <br> is written does it get converted into a proper <br> line break. That's why you're seeing that quick flash of the < symbol.

Here are two straightforward fixes to solve this:

Fix 1: Use Line Breaks with CSS (Simplest for Newlines) #

Instead of using HTML entities, use a regular newline character \n and set CSS to respect it. This way, you avoid dealing with HTML tags entirely during the typing animation:

<!DOCTYPE html>
<html>
<body>
<div id="typing" class="typing"></div>
<script>
var typeString = ['I m Mr. Frits and \n i love Pakistan...:)'];
var i = 0;
var count = 0;
var selectedText = '';
var text = '';

(function type() {
  if (count == typeString.length) {
    count = 0;
  }
  selectedText = typeString[count];
  text = selectedText.slice(0, ++i);
  
  // Use textContent instead of innerHTML to avoid parsing issues
  const typingEl = document.getElementById('typing');
  typingEl.textContent = text;
  
  // Apply styles in one place for cleaner code
  typingEl.style.fontSize = '50px';
  typingEl.style.fontFamily = 'monospace';
  typingEl.style.color = 'black';
  typingEl.style.fontWeight = 'bold';
  typingEl.style.whiteSpace = 'pre-wrap'; // Makes \n act like a line break

  if (text.length === selectedText.length) {
    count++;
    i = 0;
  }
  setTimeout(type, 300);
}());
</script>
</body>
</html>

Fix 2: Split Content into Text and HTML Segments (More Flexible for Multiple Tags) #

If you need to use other HTML tags later, split your content into text segments and HTML tags. This lets you insert tags directly instead of typing them as characters:

<!DOCTYPE html>
<html>
<body>
<div id="typing" class="typing"></div>
<script>
// Split content into text chunks and HTML elements
var typeContent = [
  { type: 'text', content: 'I m Mr. Frits and ' },
  { type: 'html', content: '<br>' },
  { type: 'text', content: ' i love Pakistan...:)' }
];

var segmentIndex = 0;
var charIndex = 0;
var loopCount = 0;
var currentOutput = '';

(function type() {
  // Reset when we finish all content loops
  if (loopCount === typeContent.length) {
    loopCount = 0;
    segmentIndex = 0;
    charIndex = 0;
    currentOutput = '';
  }

  const currentSegment = typeContent[segmentIndex];
  if (currentSegment.type === 'text') {
    // Type one character at a time for text
    currentOutput += currentSegment.content.charAt(charIndex);
    charIndex++;
    
    // Move to next segment when we finish this text chunk
    if (charIndex === currentSegment.content.length) {
      segmentIndex++;
      charIndex = 0;
    }
  } else if (currentSegment.type === 'html') {
    // Insert the HTML tag immediately
    currentOutput += currentSegment.content;
    segmentIndex++;
  }

  const typingEl = document.getElementById('typing');
  typingEl.innerHTML = currentOutput;
  
  // Apply styles
  typingEl.style.fontSize = '50px';
  typingEl.style.fontFamily = 'monospace';
  typingEl.style.color = 'black';
  typingEl.style.fontWeight = 'bold';

  // Check if we've gone through all segments
  if (segmentIndex === typeContent.length) {
    loopCount++;
  }

  setTimeout(type, 300);
}());
</script>
</body>
</html>

Both fixes eliminate the < flash because they don't rely on typing out HTML entities. The first is great if you only need line breaks, and the second scales better if you want to add links, bold text, or other HTML later.

内容的提问来源于stack exchange，提问作者Shehryar