Javascript 在iOS电子书阅读器中使用execCommand高亮显示HTML的任何替代方法

我正在使用

UIWebView

为iOS开发一个图书阅读器。目前，我正在处理一些基本的HTML文件，但最终将使用ePubs。我正在寻找一种合适的方式来设置文本范围的样式。我的音域有点特别，因为它们通常包含三个音域——一个键音域、一个紧靠前的音域和一个紧靠后的音域。keyrange可以跨越多个节点，例如可以在粗体文本的选择范围内开始或结束。不应将样式写入文件

目前，我有一个可行的解决方案，如下所示：

document.designMode = "on";

// Color the first section
var selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range1);

if (!selection.isCollapsed){ 
document.execCommand("foreColor", false, color1);    
}

// Color the middle section
selection.removeAllRanges();
selection.addRange(range2);

if (!selection.isCollapsed){   
document.execCommand("backColor", false, color2);
document.execCommand("foreColor", false, color3);
}

// Color the last section
selection.removeAllRanges();
selection.addRange(range3);

if (!selection.isCollapsed){ 
document.execCommand("foreColor", false, color1);
}

document.designMode = "off";
selection.removeAllRanges();

这很好，但速度明显很慢（在iPad2上），即使我修改它以突出显示短HTML文档中的单个范围。文本样式化之前总是有一个非常明显的延迟。看看kindle或iBooks等iPad上的电子书阅读器，没有明显的延迟。它们如何实现突出显示功能？他们可能正在读取所选文本上的地理位置并应用某种覆盖

我一直在寻找一个比我现在使用的更好的解决方案，但是运气不好，所以如果有人有想法，我将非常感激

---

谢谢大家!

我已经提出了一种替代上述方法的方法，它似乎要快得多。它主要基于mikeB在本问题中给出的优秀代码

我首先拆分开始节点和结束节点，创建新的文本节点 只有与给定范围一致的文本。我调整范围 对于新节点

我在上面的链接中使用了稍微修改过的代码版本 返回范围内包含的

文本节点数组

我循环遍历数组，并在每个文本周围放置带有样式的跨距 节点

据我测试，代码运行良好。当同时将样式应用于多个范围时，仍然会有延迟，但这比以前要好得多。我很想知道是否有人有任何改进

我的代码：

function styleRange(range, style) // the style is a string of css styles. eg."background-color:darkblue; color:blue;"
{    
    // Get the start and end nodes and split them to give new start and end nodes with only text that falls inside the range.
    var startNode = range.startContainer.splitText(range.startOffset);
    var endNode = range.endContainer.splitText(range.endOffset).previousSibling;

    // Adjust the range to contain the new start and end nodes
    // The offsets are not really important anymore but might as well set them correctly
    range.setStart(startNode,0);
    range.setEnd(endNode,endNode.length);

    // Get an array of all text nodes within the range
    var nodes = getNodesInRange(range);

    // Place span tags with style around each textnode
    for (i = 0; i < nodes.length; i++)
    {
        var span = document.createElement('span');
        span.setAttribute("style", style);
        span.appendChild( document.createTextNode(nodes[i].nodeValue));
        nodes[i].parentNode.replaceChild( span, nodes[i] );
    }
}

---

Apollo为了成功，您必须在创建span时设置onclick侦听器，方法是传递回调函数，如

span.addEventListener("click",callbackwhenclickeventtrigger,false);
function callbackwhenclickeventtrigger(e){//pass as param the event target, inside this function create the un-bold function
}

---

在这里，我正在为ipad应用程序创建epub reader应用程序，在这里，我只是在uiwebview中解压并加载epub，并尝试使用uimenuviewcontroller在uiwebview中突出显示和添加注释，我删除了文本，并使用EXECOMAND或window获取文本，但我的疑问是，我如何存储和检索注释，并在webview中突出显示文本，您能帮助我找到切换的方法吗？那么，当用户第二次设置范围“粗体”样式时，它实际上删除了粗体样式？

span.addEventListener("click",callbackwhenclickeventtrigger,false);
function callbackwhenclickeventtrigger(e){//pass as param the event target, inside this function create the un-bold function
}