Question

我正在玩耍，尝试制作一些我将来可能用于我想到的项目的东西。但是，我似乎无法使其正常工作。我确信这不是最好的方法，但这是我能想到的唯一方法。因此，这也许是我无法使其发挥作用的原因。

问题： 那么问题是该函数不会替换多个现有单词的字符串中的下一个单词出现。相反，它会回到字符串中的第一个单词。我从这里尝试了一些RegExp解决方案，但未能使其正常工作。

有什么需要做的？只需循环播放每个单词并突出显示它。它应该使用generateTime数组为每个单词设置不同的循环时间。稍后，这将是一个JSON对象。

这里只是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>

替换下一个字符串

1 个答案: