Question

我不知道如何描述这个，但我相信如果你访问这个链接你会明白的。 http://jsfiddle.net/pahnin/yN3xf/

我想用javascript将文本附加到p元素并且我已成功，但如果文本包含<font>之类的标记，则标记将按原样显示。

我应该添加代码来检测html元素，还是可以通过其他方式完成？如果我添加检测字体标记的代码如何将标记添加回文本??

Answer 1

您只需将var textcopied = $('.welcome').html();替换为var textcopied = $('.welcome').text();，即可在不包含任何HTML标记的情况下提取文本。但是，当然，你根本不会得到你的标签。

更新：一种稍微不同的方法是使用jQuery动画将整个标题顺利滑入视图：

$(document).ready(function(){
    var $title = $('.welcome');
    var twidth = $title.width();
    var theight = $title.height();
    $title.css({
        overflow: 'hidden',
        width: 0,
        whiteSpace: 'nowrap',
        height: theight
    }).animate({
        width: twidth 
    }, 5000); // milliseconds
});

http://jsfiddle.net/mblase75/yN3xf/16/

Answer 2

你可以这样做。写完所有文本后，将welcome的整个html替换为原始文本。这不是我承认的最好的。

http://jsfiddle.net/yN3xf/13/

$(document).ready(function() {
    var htmlcopied = $('.welcome').html();
    var textcopied = $('.welcome').text();
    $('.welcome').text('');

    function foobar(i) {
        if (i < textcopied.length) {
            $('.welcome').append(textcopied.charAt(i));
            setTimeout(function() {
                foobar(i + 1);
            }, 80);
        }
        else {
            $('.welcome').html(htmlcopied);
        }
    }
    foobar(0);
});

更新

这应该通过不同的方式给你想要的效果。它在原始文本的顶部有一个div，它缓慢地显示文本，看起来它正在输入。

示例

http://jsfiddle.net/guanome/LrbVy/

HTML

<div class="welcome">Hi, there <span class="hl">special text</span>, normal text <div class="overlay"></div> </div>

的javascript

$(document).ready(function() { $('.overlay').css('width', $('div.welcome').css('width')); $('.overlay').css('height', $('div.welcome').css('height') + 15); var origWidth = $('.overlay').css('width').replace(/px/g,''); foobar(origWidth); }); function foobar(i) { if (i > -10) { $('.overlay').css('width', i); setTimeout(function() { foobar(i - 10); }, 80); } }

CSS

.hl{ color: red; font-family: helvetica; background: #efefef; color: black; padding: 2px 7px; -moz-box-shadow: 0 1px 1px #CCCCCC; -webkit-box-shadow: 0 1px 1px #CCCCCC; box-shadow: 0 1px 1px #CCCCCC; } div.welcome { position: relative; width: 500px; } .overlay { position: absolute; right: 0; top: -3px; width: 100%; height: 25px; background-color: #FFF; z-index: 10; }

更新2

通过此更改，叠加层将动态添加到欢迎消息中，不必设置宽度，并且它可以轻松地使用多行。

http://jsfiddle.net/guanome/LrbVy/4/

HTML

<div class="welcome">Hi, there <span class="hl">special text</span>, normal text</div>

的javascript

$(document).ready(function() { showWelcome(); }); function foobar(i, overlay) { if (i > -10) { overlay.css('width', i); setTimeout(function() { foobar(i - 10, overlay); }, 80); } else { overlay.remove(); } } function showWelcome() { var welcome = $('div.welcome'); welcome.append('<div class="overlay"></div>'); welcome.css('position', 'relative'); var overlay = $('.overlay'); overlay.css({ 'width': welcome.css('width'), 'height': (welcome.outerHeight() + 5), 'position': 'absolute', 'right': '0', 'top': '-3px', 'background-color': '#FFF', 'z-index': '10' }); var origWidth = overlay.css('width').replace(/px/g, ''); foobar(origWidth, overlay); }

Answer 3

您还可以通过遍历根元素的contents()来实现此目的，并逐个输出每个子节点。

当处理每个contents元素时，如果它是文本节点，则输出超时的所有字符就足够了。如果它不是文本节点，请克隆该节点并将其附加到目标元素。其中的所有字符都可以以相同的方式附加。

在此处查看：http://jsfiddle.net/yN3xf/36/

$(document).ready(function(){

    var $clonedContent = $('.welcome').clone();
    $('.welcome').textContent = '';
    $('.welcome').text('');

    treatContents(0, $clonedContent, $('.welcome'));

    function treatContents(num, container, target){
        var $originalNode = container.contents()[num];
        var $targetNode;
        if ($originalNode.nodeType == 3){
            $targetNode = target;
        }
        else{
            $targetNode = $(container.contents()[num]).clone(false, false).appendTo(target);
            $targetNode.text('');
        }
        $targetNode.textContent = '';
        writeCharacters($originalNode.textContent , 0, $targetNode, num, container, target);
    }

    function writeCharacters(origText, x, target, contNum, contCont, contTarg) {
        if(x<origText.length){
           target.append(origText.charAt(x));
            setTimeout(function() { writeCharacters(origText, x+1, target, contNum, contCont, contTarg); }, 80);
        }
        else{
            treatContents(contNum+1, contCont, contTarg);
        }
    }
});

此示例可以调整为允许嵌套标记，例如：

<p class="welcome">Hi, there <b>bold text <i>bold italic text</i></b>, normal text</p>

Answer 4

尝试更换：

$('.welcome').append(textcopied.charAt(i));

使用：

textHTML += textcopied.charAt(i);
$('.welcome').html(textHTML);

在代码的开头，把它放在：

var textHTML  = '';

它有效，但看起来不太好：P

javascript文字追加

4 个答案:

更新

更新2