如何將多個跨度插入到指定索引處的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元素中？

回答

相關問題