javascript - 将子字符串替换为段落内的 html 元素，而不会使用 Jquery 弄乱事件

Question

我的目的是改变段落中每个单词的颜色，平滑且一个接一个。

它可以工作，但出现子字符串会使它崩溃。 我不太擅长 javascript，但这是我到目前为止所做的:

// GET WORDS LIST
var pText = $('p').text(); //Get the text of the concerned element
var pArray = pText.split(/\s/g); //Transform the string in an array

//Put values in a clean new array without spaces
var pClean = new Array();
var j = 0; 
for (var i = 0; i < pArray.length; i++) {
  if(pArray[i] != ''){
    pClean[j] = pArray[i];
    j++;
  }
}
var pArray = []; //Delete the old one


//WRAP AND REPLACE WORDS
var i = 0;
setInterval( function () {

  //stop the loop
  if(pClean[i] == ''){
  // I don't really ge how to use clearInterval for stopping the loop.
  }

  //replace words
  if($('p').text().indexOf(pClean[i])){

    $('p:contains("'+pClean[i]+'")').html(function(_, html) {
      var replacement = '<span class="read">'+pClean[i]+'</span>';
      return  html.replace(pClean[i], replacement);
    });

    $('p .read:last').addClass('hlight'); //highlight the last
  }

  i++;
}, 300);

这是 jsfiddle .

这一定是一个更好的方法... 感谢您的宝贵时间!

编辑-----

我应用了经过验证的答案的代码，它确实运行良好，但我也尝试在追加函数中添加异常，但没有成功。似乎没有检测到这个变量。

var words = $("p").text().split(" ");
$("p").empty();
$.each(words, function(i, v) {
    if(this == '4.'){
        $(p).append($('<br><span>'+v+'</span>'));
    }
    else {
        $(p).append($("<span>").text(v)).append(" ");
    }
});

//WRAP AND REPLACE WORDS
var i = 0;
setInterval( function () {
    //stop the loop
    if($('p :not(.read):first').length == 0){
    }
     $('p :not(.read):first').addClass("read");
    //$("p .read").removeClass("hlight");
    $("p .read:last").addClass("hlight");
}, 500);

你有什么想法吗？ 谢谢

Answer 1

如果你这样做呢，你从围绕每个单词开始，然后你可以一个一个地添加类。

var words = $("p").text().split(" ");
$("p").empty();
$.each(words, function(i, v) {
    $("p").append($("<span>").text(v)).append(" ");
});

//WRAP AND REPLACE WORDS
var i = 0;
setInterval( function () {
    //stop the loop
    if($('p :not(.read):first').length == 0){
	}
     $('p :not(.read):first').addClass("read");
    //$("p .read").removeClass("hlight");
    $("p .read:last").addClass("hlight");
}, 500);

p{
  color: black;
  width: 200px;
  margin: 100px auto 0 auto;
}

p .read{
    color: black;
    transition: color 1s ease-in-out 0.1s;
    -webkit-transition: color 1s ease-in-out 0.1s;
}

p .read.hlight{
    color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit.  
    Vestibulum dignissim, nisl nec laoreet hendrerit, tellus eros 
    tristique tortor, eu commodo nunc sem id erat. Aliquam erat 
    volutpat. Praesent ultrices quam justo, nec condimentum elit 
    imperdiet at. Duis a fringilla quam. Suspendisse condimentum 
    gravida volutpat.
</p>