我正在使用 UIWebView 为 iOS 开发图书阅读器。目前我正在处理一些基本的 HTML 文件，但最终会处理 ePub。我正在寻找一种合适的方式来设置文本范围的样式。我的范围有点特别，因为它们通常包含三个范围 - 一个键范围和紧接在前的范围和紧接在后的范围。 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 文档中的单个范围。在文本被风格化之前总是有一个非常明显的延迟。查看 iPad 上的电子书阅读器，如 kindle 或 iBooks，没有明显的延迟。他们如何实现突出显示功能？他们可能正在阅读所选文本上的地理位置并应用某种叠加层？

我一直在寻找比我已经使用的更好的解决方案，但没有成功，所以如果有人有想法，我将不胜感激。

谢谢!

最佳答案

我已经制作了一种替代上述方法的方法，它看起来要快得多。主要是基于mikeB在这个问题中给出的优秀代码。

How to get nodes lying inside a range with javascript?

1. 我首先拆分开始节点和结束节点以创建新的文本节点 仅属于给定范围的文本。我调整范围 用于新节点。

2. 我在上面的链接中使用了稍微修改过的代码版本 返回范围内包含的文本节点数组。

3. 我遍历数组并在每个文本周围放置带有样式的 span 节点。

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

我的代码:

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] );
    }
}

从 mikeB 的代码修改后的代码:

function getNodesInRange(range)
{
    var start = range.startContainer;
    var end = range.endContainer;
    var commonAncestor = range.commonAncestorContainer;
    var nodes = [];
    var node;

    // walk parent nodes from start to common ancestor
    for (node = start.parentNode; node; node = node.parentNode)
    {
        if (node.nodeType == 3) //modified to only add text nodes to the array
            nodes.push(node);
        if (node == commonAncestor)
            break;
    }
    nodes.reverse();

    // walk children and siblings from start until end is found
    for (node = start; node; node = getNextNode(node))
    {
        if (node.nodeType == 3) //modified to only add text nodes to the array
            nodes.push(node);
        if (node == end)
            break;
    }

    return nodes;
}


function getNextNode(node, end)
{
    if (node.firstChild)
        return node.firstChild;
    while (node)
    {
        if (node.nextSibling)
            return node.nextSibling;
        node = node.parentNode;
    }
}

关于javascript - 在 iOS 电子书阅读器中使用 execCommand 突出显示 HTML 的任何替代方法，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/8429290/