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

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 用空格将字符串分解为单词。然后创建具有适当样式的单词 spans，不会破坏字母 spans 本身。

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>

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

Word break problem when Splitting string into array

javascript

jquery