Hacer selección y agregar etiquetas dinámicamente en JavaScript

Necesito ayuda sobre JavaScript en iPhone UIWebView;
Tengo HTML como el siguiente:

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

Quiero hacer una selección y agregar <span> etiqueta con color al texto seleccionado en HTML para escribir una nota como un lector de libros electrónicos.

Este es mi código JavaScript para obtener el texto seleccionado:

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

Esto funciona bien y me devuelve el texto seleccionado.

También este código JS para agregar una nueva etiqueta:

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

Mi problema es asi:
si selecciono texto de "ejemplo" (mire el texto HTML) de WebView, funciona, porque no contiene ninguna etiqueta.
Pero si selecciono "selección de" (mire el texto HTML) texto de WebView, no funciona, porque inicia la etiqueta de <b>y </b> está fuera de mi selección, entonces no puedo agregar una nueva etiqueta entre <b> y </b>.

¿Como puedó resolver esté problema?

preguntado el 29 de septiembre de 11 a las 13:09

Lo siento, pero me resultó muy difícil entender esta pregunta. Recomendaría reescribirlo para que quede más claro. -

1 Respuestas

Ya que este es un UIWebView, esto es Mobile Safari y puede perder muchas de esas ramas para obtener la selección. Sugeriría usar document.execCommand() con el comando "HiliteColor", que está integrado en el navegador y funciona en toda la selección incluso cuando cruza los límites del elemento:

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

Respondido 06 Jul 15, 18:07

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.