使用格式输入文字效果：跳过HTML标签，但不要删除 [英] Typing text effect with formatting: skip HTML tags, but don't remove

问题描述

我试图提供一种简单的方法来获得输入文本效果，但也可以允许使用HTML标记。我有一些可行的代码，但我发现标签被认为是文本的一部分。

例如，如果文本是任何人都是< b>真棒< / b> ，我看到当它到达大胆的部分时：

 < 
 < b> b> 
< b> a 
< b> aw 
< b> awe 
< b> awes 
< b> aweso 
< b< ; b> awesom 
< b>真棒
< b>真棒< 
< b>真棒< / 
< b>真棒< / b 
 < b> awesome< / b> 
  

如何跳过html节点而不从字符串中移除它们？我想保持格式化工作。

以下是我迄今为止所做的：

< div id =foo>< / div>

  $ .fn.typer = function（text，options）{
 options = $ .extend（{}，{
 delay：1000，
 duration：1000，
 easing：'linear '，
 endless：false 
}，options）; 
 var elem = $（this）; 
（function loop（i） {
 var e = typeof text ==='string'？ text：text [i]; 
 //带html标签，可能有帮助
 // e.replace（/（<。*？>）/ ig，）
 $（{len：0} ）.delay（options.delay）.animate（{len：e.length}，{
 duration：options.duration，
 easing：options.easing，
 step：function（now） {
 var pos = Math.ceil（now），
 char = e.substr（pos，0）; 
 elem.html（e.substr（0，pos））; 
 $，
 complete：function（）{
 i ++; 
 if（i === text.length&&！options.endless）{
 return; 
} else if（i === text.length）{
i = 0; 
} 
 loop（i）; 
} 
}）; 
}）（0）; 
}; 
 
 $（'＃foo'）。typer（['< i>任何人< / i>< u>< / u>< b>真棒< /> ;!'， 'Foo bar。']）; 
  

工作演示：

http://jsfiddle.net/ARTsinn/RED9H/2/

更新

知道了！

示例没有 jQuery 的动画功能。

如果您有任何改进，请在此分享！

解决方案

c $ c> e ，使用：

  e = $（e）.text（）; 
  

这个假设e已知包含HTML开头。如果它可能包含纯文本，请先将它包装在DIV中：

  e = $（'< div> + e + '< / DIV>'。）文本（）; 
  

否则，jQuery会尝试将其解释为选择器。

I am trying to provide a simple way to get a typing text effect, but with the possibility to allow HTML tags too. I have some code that works, but I see the tags are being considered part of the text.

For example, if The text is "Anyone is <b>awesome</b>, I see the following when it reaches the bold part:

<
<b
<b>
<b>a
<b>aw
<b>awe
<b>awes
<b>aweso
<b>awesom
<b>awesome
<b>awesome<
<b>awesome</
<b>awesome</b
<b>awesome</b>

How can I skip html nodes without removing them from string? I want to keep the formatting working.

Here's what I've done so far:

<div id="foo"></div>

$.fn.typer = function (text, options) {
    options = $.extend({}, {
        delay: 1000,
        duration: 1000,
        easing: 'linear',
        endless: false
    }, options);
    var elem = $(this);
    (function loop(i) {
        var e = typeof text === 'string' ? text : text[i];
        // strip html tags, might be helpful
        // e.replace(/(<.*?>)/ig,"")
        $({len: 0}).delay(options.delay).animate({len: e.length}, {
            duration: options.duration,
            easing: options.easing,
            step: function (now) {
                var pos = Math.ceil(now),
                    char = e.substr(pos, 0);
                elem.html(e.substr(0, pos));
            },
            complete: function () {
                i++;
                if (i === text.length && !options.endless) {
                    return;
                } else if (i === text.length) {
                    i = 0;
                }
                loop(i);
            }
        });
    })(0);
};

$('#foo').typer(['<i>Anyone</i> <u>is</u> <b>awesome</>!', 'Foo bar.']);

Working demo:

http://jsfiddle.net/ARTsinn/RED9H/2/

Update

Got it!

example without jQuery's animate-function.

If you've any improvements, share them here!

解决方案

To strip the tags from e, use:

e = $(e).text();

This assumes e is known to contain HTML to begin with. If it might contain plain text, wrap it in a DIV first:

e = $('<div>'+e+'</div>').text();

Otherwise, jQuery will try to interpret it as a selector.

这篇关于使用格式输入文字效果：跳过HTML标签，但不要删除的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！