Создание выделения и добавление тега динамически в JavaScript - PullRequest
Новая
       7

Создание выделения и добавление тега динамически в JavaScript

4 голосов
/ 29 сентября 2011

Мне нужна помощь по JavaScript на iPhone UIWebView;
У меня есть HTML, как показано ниже: 

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

Я хочу сделать выбор и добавить тег <span> с цветом квыделенный текст в 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];

Моя проблема такова:
если я выберу текст «example» (см. текст HTML)с WebView, это работает, потому что он не содержит никаких тегов.
Но если я выбираю текст «выделение из» (посмотрите на текст HTML) из WebView, это не работает, потому что он запускает тегиз <b>, и </b> вне моего выбора, поэтому я не могу добавить новый тег между <b> и </b>.

Как я могу решить эту проблему?

1 Ответ

9 голосов
/ 29 сентября 2011

Так как это 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";
}
...