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

-2

背景：
我正在实现一项功能，该功能允许用户使用前端的JavaScript/jQuery/HTML/CSS和后端的Ruby/Rails来保留其高亮部分。我已经创建了一个保持数据库中高亮显示的功能，它嵌套在一个数组中（即[[<start_highlight_index >,<end_highlight_index >],…]）。但是，我仍然需要实现一个功能来加载页面加载时的现有高光。如何将多个跨度插入到指定索引处的HTML元素中？

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

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

注意跨度插入突出“你好”和“世界”。虽然有多种方式可以实现这一点，但听取您的建议以获得有效的方法来实现这一点会很好，因为我希望将页面加载时间降到最低。

来源

2016-09-23 lgants

编写代码将是一个良好的开端。这是你的工作。我们在这里（可能）帮助解决你最终写的问题。 –

你写的代码尝试我没有看到 –

我是这篇文章的作者：它实际上不是我的工作 - 但。我是编程新手，这是一个我正在建设的项目。我不知道为什么在这个网站上提出一个与设计和算法相关的问题是不合适的？ – lgants

这里的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); 
});

来源

2016-09-23 19:23:34

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

回答

相关问题