javascript - 替换下一次出现的字符串

Question

我正在四处游玩，尝试制作一些我将来可能会用在我有想法的项目中的东西。但是，我似乎无法使其正常工作。我确信这不是最好的方法，但这是我能想到的唯一方法。因此，这可能也是我无法让它工作的原因。

问题:那么问题是该函数不会替换多个现有单词的字符串中出现的下一个单词。相反，它返回到字符串中第一个的同一个词。我从这里尝试了一些 RegExp 解决方案，但没能成功。

它应该做什么？只是循环遍历每个单词并突出显示它一会儿。它应该使用 generateTime 数组为每个单词设置不同的循环时间。稍后很可能是 JSON 对象。

CodePen Demo / Example

这里只有JS代码:

var // ->
textElement     = $( '.text' ),
contentReplace  = textElement.text().replace( /[^\w ]/g, '' ).split( /\s+/ ),
generateTime    = [],
inc             = 0,
interval        = false;

// Generate random time
for ( var i = 0; i <= contentReplace.length; i++ ) {
    generateTime.push( Math.random() * (1 - 0.1) + 0.1 );
}

// Interval for looping trough words
var ticker = setInterval(function () {
    if ( inc == ( generateTime.length - 2 ) ) {
        clearTimeout( ticker );
    }

    if ( ! interval ) {
        setTimeout(function () {
            textElement
                .html( textElement.text().replace(contentReplace[inc], '<span>' + contentReplace[inc] + '</span>') );

            inc++;
            interval = false;
        }, generateTime[inc] * 1000);    
    }

    interval = true;
}, 500);

如果有人能帮我解决我遇到的这个问题

Answer 1

您需要跟踪最后匹配的索引。试试这个:

var // ->
textElement     = $( '.text' ),
contentReplace  = textElement.text().replace( /[^\w ]/g, '' ).split( /\s+/ ),
generateTime    = [],
inc             = 0,
interval        = false;
lastIndex       = 0;

// Generate random time
for ( var i = 0; i <= contentReplace.length; i++ ) {
  generateTime.push( Math.random() * (1 - 0.1) + 0.1 );
}

// Interval for looping trough words
var ticker = setInterval(function () {
  if ( inc == ( generateTime.length - 2 ) ) {
    clearTimeout( ticker );
  }
  
  if ( ! interval ) {
  	setTimeout(function () {
      var text = textElement.text();
      textElement
      	.html( text.substr( 0, lastIndex ) + text.substr( lastIndex, text.length ).replace( contentReplace[inc], function ( match, index ) {
            lastIndex = lastIndex + index + match.length;
            return '<span>' + contentReplace[inc] + '</span>'
         }));

      inc++;
      interval = false;
    }, generateTime[inc] * 1000);	 
  }
  
  interval = true;
}, 500);

body {
  font-family: "Helvetica";
  padding: 25px;
  text-align: center;
}

span {
  background-color: #c22;
  color: #fefefe;
  padding: 8px;
  border-radius: 3px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="text">Lets try to make it work. Try, then try again and once again - try.</div>