將字符串拆分為數組時出現斷字問題

Question

我正在使用這個名為 splt.js 的腳本來拆分字符串並為字母設置動畫。 問題是該腳本將所有字母和空格拆分為跨度，有時單詞會中斷。 我想做的是修改腳本，以便我可以先將字符串拆分為單詞，然后再拆分為字母。 有人可以幫我嗎？ 這是代碼：

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

您可以通過用空格將字符串split為單詞。 然后創建具有適當樣式的 word span不會破壞其自身的字母span 。

 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>