Javascript 使用Jquery将段落中的子字符串替换为html元素，而不影响引用

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

它可以工作，但子字符串的出现使它崩溃。 我的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);

//获取单词列表
var pText=$（'p'）.text（）//获取相关元素的文本
var pArray=pText.split（/\s/g）//转换数组中的字符串
//将值放入没有空格的干净新数组中
var pClean=新数组（）；
var j=0；
对于（变量i=0；i

这是你的电话号码

这一定是一个更好的方法。。。 谢谢你的时间

编辑----- 我应用了验证答案的代码，它工作得非常好，但我也尝试在append函数中添加异常，但没有成功。它似乎没有检测到这个var

var words=$（“p”）.text（）.split（“”）；
$（“p”）.empty（）；
$。每个（字、函数（i、v）{
如果（此=='4'）{
$（p）.追加（$（'
'+v+''）；
}
否则{
$（p）.append（$（“”）.text（v））.append（“”）；
}
});
//换行
var i=0；
setInterval（函数（）{
//停止循环
if（$（'p:not（.read:first'）。长度==0）{
}
$（'p:not（.read:first'）.addClass（“read”）；
//$（“p.read”）.removeClass（“hlight”）；
$（“p.read:last”）.addClass（“hlight”）；
}, 500);

你知道吗？

---

谢谢

如果你这样做了，你可以从每个单词的跨距开始，然后你可以一个接一个地添加类

var words=$（“p”）.text（）.split（“”）；
$（“p”）.empty（）；
$。每个（字、函数（i、v）{
$（“p”）。追加（$（“”）。文本（v））。追加（“”）；
});
//换行
var i=0；
setInterval（函数（）{
//停止循环
if（$（'p:not（.read:first'）。长度==0）{
}
$（'p:not（.read:first'）.addClass（“read”）；
//$（“p.read”）.removeClass（“hlight”）；
$（“p.read:last”）.addClass（“hlight”）；
}, 500);
p{
颜色：黑色；
宽度：200px；
保证金：100px自动0自动；
}
阅读{
颜色：黑色；
过渡：颜色1s缓进缓出0.1s；
-webkit过渡：颜色1s易入易出0.1s；
}
阅读灯{
颜色：红色；
}


Lorem ipsum dolor sit amet，是一位杰出的献身者。
显贵的前庭，nisl nec laoreet hendrerit，tellus eros
tristique tortor，eu commodo nunc sem id erat。阿利奎姆埃拉特
帕特。普雷森特优质佳肴，nec调味品精英
他在家吃饭。杜瓦是一个弗林尼拉·夸姆。悬钩子调味品
孕妇：帕特。
谢谢@shrike，它更简单，工作也更完美。我将尝试添加一个if语句（对于少数例外），然后我将告诉您什么。再次感谢！