javascript 如何逐字阅读并突出显示

Question

我有一个像这样的html

<ul>
<li>This is text</li>
</ul>
<p> bbbb ccc</p>
<p> <b> bbbb ccc</b></p>

我有所有单词索引，所以我想根据索引高亮每个文本，所以我是否可以将其转换为这种形式(将 id 分配给第一个父级):

<ul>
<li id="0">This is text</li>
</ul>
<p id="12"> bbbb ccc<p/>
<p> <b id="22"> bbbb ccc</b><p/>

id代表单词的第一个索引。

我正在尝试以下解决方案，该解决方案仅适用于仅文本包含在 p 标签中的情况，并且它在那里工作正常。但问题是当我们的 html 中有其他标签时。

$(document).ready(function() {
  var allP = $("#inputText").find("p");
  var indexCount = 0;
  $.each(allP, function(key, value) {
    var paraText = $(value).text().trim();
    var textCount = paraText.length;
    if (textCount > 0) {
      $("#inputText p").eq(key).addClass('' + indexCount);
      indexArray.push(indexCount);
    }
    indexCount += textCount;
  });
});

function changeColor(index, word) {
  var alreadyTxt = $('.highlightClass').text();
  $('.highlightClass').replaceWith(alreadyTxt);
  var paraVal = getIndexVal(index);
  if (paraVal != -1) {
    var txt = $('.' + paraVal).text();
    var filteredText = txt.substr(0, index - paraVal) + '<span    class="highlightClass">' + word + '</span>' + txt.substr(index - paraVal + word.length);
    $('.' + paraVal).html(filteredText)
  }
}

function getIndexVal(ind) {
  var retunValue = -1;
  var lastIndex = 0;
  $.each(indexArray, function(key, value) {
    if (ind <= value) {
      retunValue = lastIndex;
      return false;
    }
    lastIndex = value;
  });
  return retunValue;
}

如果还有其他更好的解决方案请推荐我，谢谢

Answer 1

$(document).ready(function(){
  var id_array =[];

  $('[id]').each(function() { 
    id_array.push(parseInt($(this).attr("id"))); 
    console.log(parseInt($(this).attr("id")));
  });

  // Sort ID 
  id_array.sort(function(a, b){return a-b});

  // highlight each ID by serialy 
  for (i = 0; i < id_array.length; i++) {
    // highlight or change background of each id
    $("#"+id_array[i]).css("background-color", "yellow");    
    // You can define delay option here to sea effect
  }
  
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<ul>
<li id="0">This is text</li>
</ul>
<p id="12"> bbbb ccc<p/>
<p> <b id="22"> bbbb ccc</b><p/>
<p> <b id="2"> 22222</b><p/>