html tag within a string displayed one character at a time

Question

html tag within a string displayed one character at a time

Navigation

#1 by (1 votes)
#2 by (0 votes)

2

When I run the code it writes the "<" of the tag before interpreting it, I would like it to interpret the tags directly without writing the opening signal.

var TxtType = function(el, toRotate, period) {
  this.toRotate = toRotate;
  this.el = el;
  this.loopNum = 0;
  this.period = parseInt(period, 10) || 2000;
  this.txt = '';
  this.tick();
  this.isDeleting = false;
};

TxtType.prototype.tick = function() {
  var i = this.loopNum % this.toRotate.length;
  var fullTxt = this.toRotate[i];

  if (this.isDeleting) {
    this.txt = fullTxt.substring(0, this.txt.length - 1);
  } else {
    this.txt = fullTxt.substring(0, this.txt.length + 1);
  }

  this.el.innerHTML = '<h2 class="typing">' + this.txt + '</h2>';

  var that = this;
  var delta = 200 - Math.random() * 100;

  if (this.isDeleting) {
    delta /= 2;
  }

  if (!this.isDeleting && this.txt === fullTxt) {
    delta = this.period;
    this.isDeleting = true;
  } else if (this.isDeleting && this.txt === '') {
    this.isDeleting = false;
    this.loopNum++;
    delta = 500;
  }

  setTimeout(function() {
    that.tick();
  }, delta);
};

window.onload = function() {
  var elements = document.getElementsByClassName('typewrite');
  for (var i = 0; i < elements.length; i++) {
    var toRotate = elements[i].getAttribute('data-type');
    var period = elements[i].getAttribute('data-period');
    if (toRotate) {
      new TxtType(elements[i], JSON.parse(toRotate), period);
    }
  }

};

<div class="typewrite" data-period="2000" data-type='[ "Pontualidade <br> na  <span>ENTREGA</span>", "Desde 1990 construindo <br> histórias pra vida toda", "23 empreendimentos" ]'>
  <h2 class="typing"></h2>
</div>

javascript html string

asked by anonymous 27.09.2017 / 20:16

2 answers

1

To achieve the effect you want, you can change the addition of the characters so that:

When you add and catch '' add the whole tag soon
When you are going to pick up and pick up '>' remove the entire tag

These manipulations can be done using the functions substring , lastIndexOf , indexOf and charAt .

This would be by modifying if (this.isDeleting) { so that it would look like this:

if (this.isDeleting) {
    //se vai apagar um > é o inicio de etiqueta
    if (this.txt.length > 0 && fullTxt.charAt(this.txt.length - 1) == '>'){
      //faz substring de 0 até ao ultimo < que é o inicio da ultima etiqueta
      this.txt = fullTxt.substring(0, this.txt.lastIndexOf('<') - 1);
    }
    else { //apagar letra normal
      this.txt = fullTxt.substring(0, this.txt.length - 1);
    }

} else {

    if (fullTxt.length >= this.txt.length + 1 && fullTxt.charAt(this.txt.length + 1) == '<') { //se vai adicionar etiqueta
      //se vai adicionar etiqueta, adiciona o bloco até o >
      this.txt = fullTxt.substring(0, fullTxt.indexOf('>', this.txt.length + 1));
    }
    else { //acrescentar letra normal
      this.txt = fullTxt.substring(0, this.txt.length + 1);
    }

}

Example:

var TxtType = function(el, toRotate, period) {
  this.toRotate = toRotate;
  this.el = el;
  this.loopNum = 0;
  this.period = parseInt(period, 10) || 2000;
  this.txt = '';
  this.tick();
  this.isDeleting = false;
};

TxtType.prototype.tick = function() {
  var i = this.loopNum % this.toRotate.length;
  var fullTxt = this.toRotate[i];

  if (this.isDeleting) {
    if (this.txt.length > 0 && fullTxt.charAt(this.txt.length - 1) == '>'){
      this.txt = fullTxt.substring(0, this.txt.lastIndexOf('<') - 1);
    }
    else {
      this.txt = fullTxt.substring(0, this.txt.length - 1);
    }
    
  } else {
    
    if (fullTxt.length >= this.txt.length + 1 && fullTxt.charAt(this.txt.length + 1) == '<') {

      this.txt = fullTxt.substring(0, fullTxt.indexOf('>', this.txt.length + 1));
    }
    else {
      this.txt = fullTxt.substring(0, this.txt.length + 1);
    }
    
  }

  this.el.innerHTML = '<h2 class="typing">' + this.txt + '</h2>';

  var that = this;
  var delta = 200 - Math.random() * 100;

  if (this.isDeleting) {
    delta /= 2;
  }

  if (!this.isDeleting && this.txt === fullTxt) {
    delta = this.period;
    this.isDeleting = true;
  } else if (this.isDeleting && this.txt === '') {
    this.isDeleting = false;
    this.loopNum++;
    delta = 500;
  }

  setTimeout(function() {
    that.tick();
  }, delta);
};

window.onload = function() {
  var elements = document.getElementsByClassName('typewrite');
  for (var i = 0; i < elements.length; i++) {
    var toRotate = elements[i].getAttribute('data-type');
    var period = elements[i].getAttribute('data-period');
    if (toRotate) {
      new TxtType(elements[i], JSON.parse(toRotate), period);
    }
  }

};

<div class="typewrite" data-period="2000" data-type='[ "Pontualidade <br> na  <span>ENTREGA</span>", "Desde 1990 construindo <br> histórias pra vida toda", "23 empreendimentos" ]'>
  <h2 class="typing"></h2>
</div>

27.09.2017 / 21:02

How to make a string in AppSettings and use it later Use the tag to download href="" passing https address to the href

score 0 · Accepted Answer

var TxtType = function(el, toRotate, period) {
  this.toRotate = toRotate;
  this.el = el;
  this.loopNum = 0;
  this.period = parseInt(period, 10) || 2000;
  this.txt = '';
  this.tick();
  this.isDeleting = false;
};

TxtType.prototype.tick = function() {
  var i = this.loopNum % this.toRotate.length;
  var fullTxt = this.toRotate[i];

  if (this.isDeleting) {
    if(fullTxt.substring(this.txt.length, this.txt.length - 1) ==='>'){
       this.txt = fullTxt.substring(0, this.txt.length - 3);
    }
    this.txt = fullTxt.substring(0, this.txt.length - 1);
  } else {
    if(fullTxt.substring(this.txt.length, this.txt.length + 1) ==='<'){
       this.txt = fullTxt.substring(0, this.txt.length + 3);
    }
    this.txt = fullTxt.substring(0, this.txt.length + 1);
  }

  this.el.innerHTML = '<h2 class="typing">' + this.txt + '</h2>';

  var that = this;
  var delta = 200 - Math.random() * 100;

  if (this.isDeleting) {
    delta /= 2;
  }

  if (!this.isDeleting && this.txt === fullTxt) {
    delta = this.period;
    this.isDeleting = true;
  } else if (this.isDeleting && this.txt === '') {
    this.isDeleting = false;
    this.loopNum++;
    delta = 500;
  }
  setTimeout(function() {
    that.tick();
  }, delta);
};

window.onload = function() {
  var elements = document.getElementsByClassName('typewrite');
  for (var i = 0; i < elements.length; i++) {
    var toRotate = elements[i].getAttribute('data-type');
    var period = elements[i].getAttribute('data-period');
    if (toRotate) {
      new TxtType(elements[i], JSON.parse(toRotate), period);
    }
  }

};

<div class="typewrite" data-period="2000" data-type='[ "Pontualidade <br> na  ENTREGA", "Desde 1990 construindo <br> histórias pra vida toda", "23 empreendimentos" ]'>
  <h2 class="typing"></h2>
</div>

When the person is bored, it solves everything ... kkkk