Javascript jQuery使用格式编写每个字符

假设我有一个JavaScript字符串：

var str = '<span class="color:red;">Hello</span> my name is <span class="color:red;">Julian</span>';

var str='你好，我叫朱利安'；

所以我想把每一个300ms打印一个字符，这样看起来就像是输入的一样。当然，我可以为每个字符创建一个for循环，并将其打印到元素中，但问题在于格式。如果我使用for循环，它甚至会单独打印span标记，但这会导致问题

---

如何在格式化一段时间后打印每个字符？

这是一个相当邪恶的把戏，但您可以在字符串顶部使用一个白色div，并每300毫秒一步移动一次。这样，每隔300毫秒就会出现一个字母。唯一的问题是确定每个步骤需要多大，因为每个字符的宽度都会不同

---

确定宽度的一种方法是在一个div中分别加载所有字符并测量宽度。当然，您首先需要剥离html。为了达到这个目的，你可以使用这个相当邪恶的技巧，但是你可以在你的琴弦上使用一个白色的div，然后每300毫秒一步一步地移动它。这样，每隔300毫秒就会出现一个字母。唯一的问题是确定每个步骤需要多大，因为每个字符的宽度都会不同

---

确定宽度的一种方法是在一个div中分别加载所有字符并测量宽度。当然，您首先需要剥离html。为了使用

，您可以将所有字符拆分为一个数组，然后像这样循环：

var str = '<span class="red">Hello</span> my name &nbsp; is <span class="red">Julian</span>',
    AllChars = [],
    SetTxt = true,
    newstr = '';

for (var i = 0; i < str.length; i++) {
    newstr += str.substr(i,1);
    if((str.substr(i,1) == '<') || (str.substr(i,1) == '&')){
        SetTxt = false;
    }else if(SetTxt){
        AllChars.push(newstr);
    }else if((str.substr(i,1) == '>') || (str.substr(i,1) == ';')){
        if(str.length == (i+1)){
            AllChars.push(newstr);
        }
        SetTxt = true;
    } 
}

for (var i in AllChars){
    setTimeout(function(i){
        $('#text').html(AllChars[i]);
    },300 * i,i); 
}

var str='你好，我叫朱利安'，
AllChars=[]，
SetTxt=true，
newstr=''；
对于（变量i=0；i

---

检查JSFIDLE以获得一个工作示例：

您可以将所有字符拆分为一个数组，然后像这样循环：

var str = '<span class="red">Hello</span> my name &nbsp; is <span class="red">Julian</span>',
    AllChars = [],
    SetTxt = true,
    newstr = '';

for (var i = 0; i < str.length; i++) {
    newstr += str.substr(i,1);
    if((str.substr(i,1) == '<') || (str.substr(i,1) == '&')){
        SetTxt = false;
    }else if(SetTxt){
        AllChars.push(newstr);
    }else if((str.substr(i,1) == '>') || (str.substr(i,1) == ';')){
        if(str.length == (i+1)){
            AllChars.push(newstr);
        }
        SetTxt = true;
    } 
}

for (var i in AllChars){
    setTimeout(function(i){
        $('#text').html(AllChars[i]);
    },300 * i,i); 
}

var str='你好，我叫朱利安'，
AllChars=[]，
SetTxt=true，
newstr=''；
对于（变量i=0；i

---

查看JSFIDLE以获得一个工作示例：

您需要分别解析html标记和文本。比如：

var str = '<span class="colored">Hello</span> my name is <span class="colored bold">Julian</span>';      

function printTextByLetter(text, selector, speed) {
    var html = text.match(/(<[^<>]*>)/gi),
        sel = selector || 'body',
        arr = text.replace(/(<[^<>]*>)/gi, '{!!}').match(/(\{!!\}|.)/gi),
        counter = 0, cursor = jQuery(sel), insideTag,
        interval = setInterval(printChar, speed);       
    function printChar() {
        if(arr[0]){            
            if(arr[0] === '{!!}') {
                if(!insideTag) {
                    insideTag = true;
                    cursor.append(html[0], html[1]);
                    html.shift();
                    html.shift();
                    cursor = cursor.children().eq(counter);    
                } else {
                    insideTag = false;
                    cursor = cursor.parent();
                    counter++;        
                }                
            } else {
                cursor.append(arr[0]);    
            }
            arr.shift();            
        } else {
            clearInterval(interval);
        }
    }
}        
// DOM ready
jQuery(function($){    
    printTextByLetter(str, '#target', 300);    
});

var str='你好，我叫朱利安'；
功能PrintTextByLitter（文本、选择器、速度）{
var html=text.match（/（）/gi），
sel=选择器| |“主体”，
arr=text.replace（/（）/gi，{！！}'）.match（/（\{！！\}}}./gi），
计数器=0，游标=jQuery（sel），内部标记，
间隔=设置间隔（打印字符，速度）；
函数printChar（）{
if（arr[0]）{
如果（arr[0]=='{！！}'）{
如果（！insideTag）{
insideTag=真；
append（html[0]，html[1]）；
html.shift（）；
html.shift（）；
游标=游标.children（）.eq（计数器）；
}否则{
insideTag=假；
cursor=cursor.parent（）；
计数器++；
}                
}否则{
cursor.append（arr[0]）；
}
arr.shift（）；
}否则{
间隔时间；
}
}
}        
//DOM就绪
jQuery（函数（$）{
printTextByLetter（str，#target'，300）；
});

别忘了清除间隔-它确实会影响性能

---

JSFIDLE上的示例：

您需要分别解析html标记和文本。比如：

var str = '<span class="colored">Hello</span> my name is <span class="colored bold">Julian</span>';      

function printTextByLetter(text, selector, speed) {
    var html = text.match(/(<[^<>]*>)/gi),
        sel = selector || 'body',
        arr = text.replace(/(<[^<>]*>)/gi, '{!!}').match(/(\{!!\}|.)/gi),
        counter = 0, cursor = jQuery(sel), insideTag,
        interval = setInterval(printChar, speed);       
    function printChar() {
        if(arr[0]){            
            if(arr[0] === '{!!}') {
                if(!insideTag) {
                    insideTag = true;
                    cursor.append(html[0], html[1]);
                    html.shift();
                    html.shift();
                    cursor = cursor.children().eq(counter);    
                } else {
                    insideTag = false;
                    cursor = cursor.parent();
                    counter++;        
                }                
            } else {
                cursor.append(arr[0]);    
            }
            arr.shift();            
        } else {
            clearInterval(interval);
        }
    }
}        
// DOM ready
jQuery(function($){    
    printTextByLetter(str, '#target', 300);    
});

var str='你好，我叫朱利安'；
功能PrintTextByLitter（文本、选择器、速度）{
var html=text.match（/（）/gi），
sel=选择器| |“主体”，
arr=text.replace（/（）/gi，{！！}'）.match（/（\{！！\}}}./gi），
计数器=0，游标=jQuery（sel），内部标记，
间隔=设置间隔（打印字符，速度）；
函数printChar（）{
if（arr[0]）{
如果（arr[0]=='{！！}'）{
如果（！insideTag）{
insideTag=真；
append（html[0]，html[1]）；
html.shift（）；
html.shift（）；
游标=游标.children（）.eq（计数器）；
}否则{
insideTag=假；
cursor=cursor.parent（）；
计数器++；
}                
}否则{
cursor.append（arr[0]）；
}
arr.shift（）；
}否则{
间隔时间；
}
}
}        
//DOM就绪
jQuery（函数（$）{
printTextByLetter（str，#target'，300）；
});

别忘了清除间隔-它确实会影响性能

---

JSFIDLE上的示例：

嘿：）哇，太棒了！但有两件事我不明白：1）为什么最后一个字符被替换了？例如，“朱利安”将是“朱莉娅”。2）为什么它不使用？我看不出你关闭了AllChars中的标签。你相信所有浏览器都会关闭标签吗？我发现HTML字符有问题。例如，如果你把它写的字符串放在里面而没有格式化，我就改变了代码。它将显示最后一个字符并关闭span标记。我还添加了对标记的支持，如果您想支持更多html标记，您必须添加它们以获得支持。我已经更新了JSFIDLE：我希望这有助于为您指明正确的方向。嘿：）哇，太棒了！但是