进行选择和在 JavaScript 中动态添加标签

发布于 2024-12-07 02:36:48 字数 2422 浏览 1 评论 0原文

我需要有关 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 选择“选择”（查看 HTML 文本）文本，则它不起作用，因为它以 标签开头，并且 < code> 不在我的选择范围内，那么我无法在和之间添加新标签>。

我该如何解决这个问题？

原文

I need some help about JavaScript on iPhone UIWebView;
I have HTML like below:

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

I want to make a selection, and add  tag with color to the selected text in HTML to write a note just like an e-book reader.

This is my JavaScript code to get the selected text:

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

This works good, and returns me the selected text.

Also this JS code for adding a new tag:

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

My problem is so:
if I select "example" (look at the HTML text) text from WebView, it works, because it doesn't contain any tag.
But if I select "selection from" (look at the HTML text) text from WebView, it's not working, because it starts the tag of , and  is out of my selection, then I can't add a new tag between  and .

How can I solve this problem?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

花落人断肠 2024-12-14 02:36:48

由于这是一个 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";
}

Since this is a UIWebView, this is Mobile Safari and you can lose a lot of those branches for obtaining the selection. I would suggest using document.execCommand() with the "HiliteColor" command, which is built into the browser and works on the whole selection even when it crosses element boundaries:

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";
}

回复收藏 0 原文

~没有更多了~