在 JavaScript 中动态选择和添加标签答案

【问题标题】：Making Selection & Adding tag dynamically in JavaScript在 JavaScript 中动态选择和添加标签
【发布时间】：2011-11-27 17:15:52
【问题描述】：

我需要一些关于 iPhone 上 JavaScript 的帮助 UIWebView;
我有如下 HTML：

<html>
   <head>
      <title>Example</title>
   </head>
   <body>
     <span>this example for selection <b>from</b> UIWebView</span>
   </body>
</html>

我要进行选择，并在 HTML 中为所选文本添加带有颜色的 标记，以便像电子书阅读器一样写笔记。

这是我获取所选文本的 JavaScript 代码：

NSString *SelectedString = [NSString stringWithFormat:@"function getSelText()"
                     "{"
                     "var txt = '';"
                     " if (window.getSelection)"
                     "{"
                     "txt = window.getSelection();"
                     " }"
                     "else if (document.getSelection)"
                     "{"
                     "txt = document.getSelection();"
                     "}"
                     "else if (document.selection)"
                     "{"
                     "txt = document.selection.createRange().text;"
                     "}"
                     "else return;"
                     "alert(txt);"
                     "}getSelText();"];
[webView stringByEvaluatingJavaScriptFromString:SelectedString];

这很好用，并将选定的文本返回给我。

还有这个用于添加新标签的 JS 代码：

NSString *AddSpanTag = [NSString stringWithFormat:@"function selHTML() {"
                 "if (window.ActiveXObject) {"
                 "var c = document.selection.createRange();"
                 "return c.htmlText;"
                 "}"
                 "var nNd = document.createElement(\"span\");"
                 "var divIdName = \'myelementid\';"
                 "var ColorAttr = \"background-color: #ffffcc\";"
                 "nNd.setAttribute(\'id\',divIdName);"
                 "nNd.setAttribute(\'style\',ColorAttr);"
                 "var w = getSelection().getRangeAt(0);"
                 "w.surroundContents(nNd);"
                 "return nNd.innerHTML;"
                 "}selHTML();"];
[webView stringByEvaluatingJavaScriptFromString:AddSpanTag];

我的问题是这样的：
如果我从WebView 中选择“示例”（查看 HTML 文本）文本，它可以工作，因为它不包含任何标签。
但是，如果我从WebView 中选择“selection from”（查看HTML 文本）文本，它就不起作用，因为它开始 的标签，而 不在我的选择范围内，那么我不能在 和 之间添加一个新标签。

我该如何解决这个问题？

【问题讨论】：

对不起，我发现这个问题真的很难理解。我建议重写它，这样更清楚。

标签： javascript iphone html uiwebview selection

【解决方案1】：

因为这是 UIWebView，所以这是 Mobile Safari，您可能会失去很多分支来获得选择。我建议将document.execCommand() 与“HiliteColor”命令一起使用，该命令内置于浏览器中，即使跨越元素边界也适用于整个选择：

var sel = window.getSelection();
if (!sel.isCollapsed) {
    var selRange = sel.getRangeAt(0);
    document.designMode = "on";
    sel.removeAllRanges();
    sel.addRange(selRange);
    document.execCommand("HiliteColor", false, "#ffffcc");
    sel.removeAllRanges();
    document.designMode = "off";
}

【讨论】：