let text = "Ferrars all spirits his imagine effects amongst neither.<br><br>Sure last upon he same as knew next. <b>End friendship sufficient assistance</b> can prosperous met. As game he show it park do. Was has <b>unknown few certain </b>ten promise. No finished my <b>an likewise cheerful packages we are.</b>For assurance concluded son <br><br>son something depending discourse see led collected. <b>Packages oh no denoting my advanced humoured.</b> Pressed be so thought natural.<br>";

const skip = document.querySelector('#skipAnimation');

// replace <br> tags with newline characters
text = text.replace(/<br>/g, 'n');

// define an array to hold any bold strings
let boldTextRange = [];

// we need to track positions of the shift of characters when we remvoe the break tags
let replacedText = ''; // initialize a variable to track the character offset

// initialize a variable to keep a closer track on the 
// positions of the characters before removing bold tags
let tagOffset = 0; 

// strip <b> tags from the string and define a start and end 
// range object and push that into the boldTextRange array
replacedText = text.replace(/<b>(.*?)</b>/g, (match, newText, offset) => {
  const adjustedOffset = offset - tagOffset; // FIX
  boldTextRange.push({ 
    start: adjustedOffset, 
    end: adjustedOffset + newText.length 
  });
  tagOffset += match.length - newText.length; // track how many characters were removed exactly
  return newText; // return unformatted text
});

// get the length of the stripped and formatted text
let totalLength = replacedText.length;

// define the index to track where in the typing animation
let index = 0;

// added a skip animation, since index is defined outside update  
// methods scope and changed inside the scope, you can that
// simply place logic right after indexes initial definition
function skipAnimation(){
  return index = text.length;
}
skip.addEventListener('click', skipAnimation);


// function for the typing animation
function typingAnimation(id) {
  setTimeout(() => {
    index++;
    updateText(id);
    if (index < totalLength) {
      typingAnimation(id);
    }
  }, 50);
}

// helper function to apply bold formatting 
function applyBoldFormatting(replacedText) {
  // define an empty variable to hold the formatted text
  let formattedText = '';
  // set a boolean to track wrapping in span
  let boldBool = false;

  // iterate over the text and apply bold formatting
  for (let i = 0; i < replacedText.length; i++) {

    // define a boolean to track the range start and end for bold formatted text
    const isBold = boldTextRange.some(range => i >= range.start && i < range.end);
    
    // conditional to check if character is bold and set 
    // formatted text span tags open and closing tags
    if (isBold && !boldBool) {
      formattedText += `<span class="bold">`;
      boldBool = true; // set boolean to track range
    } else if (!isBold && boldBool) {
      formattedText += `</span>`; // close out the span tag
      boldBool = false; // reset boolean to false 
    }

    // add the next character to the string
    formattedText += replacedText[i];
  }

  // return the formatted string
  return formattedText;
}

// function to update the text in the element
function updateText(id) {
  // get the element to display the typing animation
  const typing = document.getElementById(id);
  if (!typing) return;

  // geet the text up to the current index
  let currentText = replacedText.substring(0, index);

  // pass in the currentText to apply bold formatting
  let formattedText = applyBoldFormatting(currentText);

  // replace newline characters with <br> for proper line breaks
  formattedText = formattedText.replace(/n/g, '<br>');

  // display the formatted text animation
  typing.innerHTML = formattedText;
}

// start the typing animation
typingAnimation("typing-animation");

.bold {
  font-weight: bold;
}

<div>
  <button id="skipAnimation">Skip Animation</button>
  <div id="typing-animation"></div>
</div>