2010-08-23 24 views
5

Estoy tratando de resaltar un trozo de texto en un "Textarea". tengo una larga cadena en la que TextArea:Destacando un trozo de cuerda en un TextArea

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident 

Y tengo una función que se puede extraer la primera aparición cadena que se encuentra entre los VARs y "begin" de "extremos". Por ejemplo:

extract("ipsum", "consectetur") // This will give: "dolor sit amet," 

Pero, lo que quiero es seleccionar el resultado de la función por lo que la cadena resultante "dolor sit amet," será resaltado.

¿Es posible? ¿Cómo puedo hacer esto?

Gracias,

Saludos.

+0

Con resaltado, supongo que quiere decir seleccionar? –

Respuesta

2

Recuerdo haber visto esto hace un tiempo ... http://www.din.or.jp/~hagi3/JavaScript/JSTips/Mozilla/Samples/NSHTMLTextAreaElement.htm

Es bastante complicado y podría nunca ser molestado a conseguir mi cabeza alrededor de ella. No sé si esto es lo que necesitas, o si puedes usarlo en absoluto. :)

+0

nice one Thomas. –

+0

Se ve bien, pero funciona con IE 6/7/8? (No se puede probar esto en este momento) –

+1

No, ni siquiera intenta soportar IE. –

2

No se pueden resaltar las diferentes partes del texto en un área de texto. Puede seleccionar una parte pero no varias partes y seleccionar no resaltar. Usted puede tomar el contenido de su área de texto y pero una <div> por ejemplo, y poner de relieve las frases rodeándolos con <span class="highlight">...</span>

+0

El OP no solicitó resaltar las dos primeras cadenas. Él quería resaltar el texto entre ellos. – MarkHu

4

Aquí hay un código que va a seleccionar un rango de texto en un área de texto en todos los principales navegadores, incluyendo IE 6+ :

function offsetToRangeCharacterMove(el, offset) { 
    return offset - (el.value.slice(0, offset).split("\r\n").length - 1); 
} 

function setSelection(el, start, end) { 
    if (typeof el.selectionStart == "number" && typeof el.selectionEnd == "number") { 
     el.selectionStart = start; 
     el.selectionEnd = end; 
    } else if (typeof el.createTextRange != "undefined") { 
     var range = el.createTextRange(); 
     var startCharMove = offsetToRangeCharacterMove(el, start); 
     range.collapse(true); 
     if (start == end) { 
      range.move("character", startCharMove); 
     } else { 
      range.moveEnd("character", offsetToRangeCharacterMove(el, end)); 
      range.moveStart("character", startCharMove); 
     } 
     range.select(); 
    } 
} 

var textarea = document.getElementById("your_textarea"); 
var val = textarea.value; 
var start = val.indexOf("ipsum") + 5, end = val.indexOf("consectetur"); 
setSelection(textarea, start, end); 
+0

Todo bien, excepto el '+ 5' kludge, que presumiblemente es la longitud de la primera cadena. Esto es muy similar a un algoritmo en una de las respuestas a http://stackoverflow.com/questions/1981088/set-textarea-selection-in-internet-explorer – MarkHu

+0

@MarkHu: Sí, el '+ 5' es exactamente eso hecho por brevedad Parece un poco extraño usar '" ipsum ".length' en su lugar. La similitud con la otra respuesta creo que puede ser un caso de esa respuesta tomada de uno de los míos ([este]] (http://stackoverflow.com/questions/3622818/ies-document-selection-createrange-doesnt-include- leading-or-trailing-blank-li), por ejemplo). –

Cuestiones relacionadas