将字符串拆分为数组时出现断字问题

Question

I'm using this script called splt.js to split strings and animate the letters. The problem is that this script is splitting all letters and white spaces into spans and sometimes words break. What I would like to do is to modify the script so I could first split the string into words and then letters. Could someone help me with that? This is the code:

function splt({ target = '.splt', reveal = false }) {
  let saveOriginal = [];

  //grab instances
  const inst = document.querySelectorAll(target);

  for (let a = 0; a < inst.length; a++) {
    inst[a].setAttribute('id', 'i' + [a + 1]);

    //saves original text to an array for revert functionality
    saveOriginal.push(inst[a].innerHTML);

    //split instance text
    const instChars = inst[a].innerHTML.split('');
    for (let b = 0; b < instChars.length; b++) {
      //nest child span
      const span = document.createElement('span');
      inst[a].appendChild(span);
      span.setAttribute('id', 'c' + [b + 1]);

      //check if child = char or whitespace
      if (instChars[b] == ' ') {
        span.classList.add('whtSpc');
      } else {
        span.classList.add('char');
        //add char styles
        const char = document.querySelectorAll('.char');
        for (let c = 0; c < char.length; c++) {
          char[c].style.display = 'inline-block';
          char[c].style.overflow = 'hidden';
          char[c].style.verticalAlign = 'top';
        }
      }

      //reveal init
      if (reveal == true) {
        //nest grandchild span
        const spanChild = document.createElement('span');
        spanChild.innerHTML = instChars[b]; //set text to grandchild span
        span.appendChild(spanChild);
        spanChild.setAttribute('id', 'r');
        spanChild.classList.add('reveal');
        //add charReveal styles
        const charReveal = document.querySelectorAll('.reveal');
        for (let d = 0; d < charReveal.length; d++) {
          charReveal[d].style.display = 'inherit';
          charReveal[d].style.overflow = 'inherit';
          charReveal[d].style.verticalAlign = 'inherit';
        }
      } else {
        span.innerHTML = instChars[b]; //set text to child span
      }
    }

    inst[a].removeChild(inst[a].childNodes[0]); // remove initial text input
  }

  //undo text splitting
  splt.revert = () => {
    for (let e = 0; e < inst.length; e++) {
      inst[e].removeAttribute('id');
      inst[e].innerHTML = saveOriginal[e]; //sets text to original value
    }
  };
}

Answer 1

You can break strings into words by split ting them by spaces. Then create word span s with appropriate styling that don't break letter span s within themselves.

 function splt({ target = '.splt', reveal = false }) { let saveOriginal = []; //grab instances const inst = document.querySelectorAll(target); for (let a = 0; a < inst.length; a++) { inst[a].setAttribute('id', 'i' + [a + 1]); //saves original text to an array for revert functionality saveOriginal.push(inst[a].innerHTML); //split instance text into words const instWords = inst[a].innerHTML.split(' '); //split into words by spaces for (let i = 0; i < instWords.length; i++) { const word = document.createElement('span'); //word span //split instance text instWords[i] += " "; //add a space back since the delimeter is omitted const instChars = instWords[i].split(''); for (let b = 0; b < instChars.length; b++) { //nest child span const span = document.createElement('span'); word.appendChild(span); span.setAttribute('id', 'c' + [b + 1]); //check if child = char or whitespace if (instChars[b] == ' ') { span.classList.add('whtSpc'); } else { span.classList.add('char'); } //reveal init if (reveal == true) { //nest grandchild span const spanChild = document.createElement('span'); spanChild.innerHTML = instChars[b]; //set text to grandchild span span.appendChild(spanChild); spanChild.setAttribute('id', 'r'); spanChild.classList.add('reveal'); //add charReveal styles } else { span.innerHTML = instChars[b]; //set text to child span } } word.style.display = 'inline-block'; //keep letter spans together; this trims space spans inst[a].appendChild(word); } inst[a].removeChild(inst[a].childNodes[0]); // remove initial text input } //move element styling outside loops so it's done only once const char = document.querySelectorAll('.char'); for (let c = 0; c < char.length; c++) { char[c].style.display = 'inline-block'; char[c].style.overflow = 'hidden'; char[c].style.verticalAlign = 'top'; } const whtSpc = document.querySelectorAll('.whtSpc'); for (let s = 0; s < whtSpc.length; s++) { whtSpc[s].style["white-space"] = 'pre'; //make space spans visible from trimming } if (reveal == true) { const charReveal = document.querySelectorAll('.reveal'); for (let d = 0; d < charReveal.length; d++) { charReveal[d].style.display = 'inherit'; charReveal[d].style.overflow = 'inherit'; charReveal[d].style.verticalAlign = 'inherit'; } } //undo text splitting splt.revert = () => { for (let e = 0; e < inst.length; e++) { inst[e].removeAttribute('id'); inst[e].innerHTML = saveOriginal[e]; //sets text to original value } }; } splt({ target:'.splt', reveal: false});

 <html> <head> <meta charset="UTF-8"> </head> <body> <p class="splt">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </body> </html>