Question

背景：
我正在实现一个功能，允许用户使用JavaScript / jQuery / HTML / CSS作为前端和后端的Ruby / Rails来捕获和保留其高光。我已经创建了一个在数据库中保留高亮的功能，这些功能嵌套在一个数组中（即[[<start_highlight_index >,<end_highlight_index >],…]）。但是，我仍然需要实现一个功能来加载页面加载时的现有高光。

简化示例：
给定一个段落元素<p>Hello world</p>和一个[[1,4],[6,10]]数组，创建以下元素的最佳方法是什么：

<p><span style="background-color:yellow">Hello</span> <span style="background-color:yellow">world</span></p>

请注意，插入了跨度以突出显示“Hello”和“world”。虽然有多种方法可以实现这一点，但是很高兴听到您提出有效方法的建议，因为我希望将页面加载时间保持在最低限度。

Answer 1

此处的javascript代码适用于您的目的

$(document).ready(function(){
  var content = $("p").html();
  var arr = [[1,4],[6,10]];
  var newHTML = "";
  prevIndex = 0;
  arr.forEach(function(item){
    newHTML += content.substring(prevIndex, item[0]);
    newHTML += '<span style="background-color:yellow">' + content.substring(item[0], item[1]) + '</span>';
    prevIndex = item[1];
  });  
  newHTML += content.substring(prevIndex, content.length);
  $("#ptag").html(newHTML);
});

如何在指定索引处的HTML元素中插入多个跨度？

1 个答案: