如何在动态元素中而不是在 JS 中打乱字母？

Question

如何修改以下 JavaScript 以接受动态 HTML span 元素的文本内容，而不是像当前那样使用静态内容？

var Messenger = function(el){
  'use strict';
  var m = this;
  
  m.init = function(){
    m.codeletters = "&#*+%?£@§$";
    m.message = 0;
    m.current_length = 0;
    m.fadeBuffer = false;
    // expects the element <span id="mySpanElement"> to exist on page
m.messages = [ document.getElementById('mySpanElement').innerHTML ];
    
    setTimeout(m.animateIn, 100);
  };
  
  m.generateRandomString = function(length){
    var random_text = '';
    while(random_text.length < length){
      random_text += m.codeletters.charAt(Math.floor(Math.random()*m.codeletters.length));
    } 
    
    return random_text;
  };
  
  m.animateIn = function(){
    if(m.current_length < m.messages[m.message].length){
      m.current_length = m.current_length + 2;
      if(m.current_length > m.messages[m.message].length) {
        m.current_length = m.messages[m.message].length;
      }
      
      var message = m.generateRandomString(m.current_length);
      $(el).html(message);
      
      setTimeout(m.animateIn, 20);
    } else { 
      setTimeout(m.animateFadeBuffer, 20);
    }
  };
  
  m.animateFadeBuffer = function(){
    if(m.fadeBuffer === false){
      m.fadeBuffer = [];
      for(var i = 0; i < m.messages[m.message].length; i++){
        m.fadeBuffer.push({c: (Math.floor(Math.random()*12))+1, l: m.messages[m.message].charAt(i)});
      }
    }
    
    var do_cycles = false;
    var message = ''; 
    
    for(var i = 0; i < m.fadeBuffer.length; i++){
      var fader = m.fadeBuffer[i];
      if(fader.c > 0){
        do_cycles = true;
        fader.c--;
        message += m.codeletters.charAt(Math.floor(Math.random()*m.codeletters.length));
      } else {
        message += fader.l;
      }
    }
    
    $(el).html(message);
    
    if(do_cycles === true){
      setTimeout(m.animateFadeBuffer, 50);
    } else {
      setTimeout(m.cycleText, 2000);
    }
  };
  
  m.cycleText = function(){
    m.message = m.message + 1;
    if(m.message >= m.messages.length){
      m.message = 0;
    }
    
    m.current_length = 0;
    m.fadeBuffer = false;
    $(el).html('');
    
    setTimeout(m.animateIn, 200);
  };
  
  m.init();
}

console.clear();
var messenger = new Messenger($('#mySpanElement'));

body {
  background: #222;
  color: #f0f0f0;
}

.messenger {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: monospace;
  font-size: 2.5em;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="mySpanElement" class="messenger"></span>

编辑：从我原来的 post 开始，我将 m.messages 行编辑为：m.messages = [ document.getElementById('mySpanElement').innerHTML ]; 并更新了 HTML 以包含 mySpanElement id。当代码运行时，这似乎可以正确地对输入的任何文本进行动画处理。

Answer 1

在 Messenger 的 init() 中，更改以下行

m.codeletters = "&#*+%?£@§$";

至

// expects the element <span id="mySpanElement">&#*+%?£@§$</span> to exist on page
m.codeletters = document.getElementById('mySpanElement').innerHTML;

这将从 span 元素中获取 HTML 并使用它代替静态字符。

如何在动态元素中而不是在 JS 中打乱字母？

HowTo scramble letters in a dynamic element instead of within JS?

javascript

animation

shuffle

scramble