API de Selección y Rango de JavaScript

JavaScript es una herramienta poderosa para los desarrolladores web, y comprender cómo manipular el Modelo de Objetos del Documento (DOM) es crucial para crear aplicaciones web dinámicas. Este artículo ofrece una exploración detallada de las interfaces Selection y Range en JavaScript, esenciales para la manipulación de texto y la interacción del usuario dentro de las páginas web.

Comprensión de la Interfaz Selection

La interfaz Selection representa el rango de texto seleccionado por el usuario o la posición actual del cursor. Se puede acceder a ella a través del método window.getSelection(). Esta interfaz proporciona varios métodos y propiedades que permiten a los desarrolladores manipular el texto seleccionado.

Métodos de la Interfaz Selection

• getRangeAt(index): Devuelve un objeto Range que representa uno de los rangos seleccionados actualmente.
• addRange(range): Añade un objeto Range a la selección actual.
• removeRange(range): Elimina un objeto Range de la selección. (Obsoleto en navegadores modernos; use removeAllRanges() en su lugar.)
• removeAllRanges(): Elimina todos los rangos de la selección actual.
• collapse(node, offset): Contrae la selección actual a un único punto dentro del nodo.

Ejemplo Práctico: Resaltar Texto

A continuación se muestra cómo puede utilizar las interfaces Selection y Range para resaltar texto programáticamente:

Nota: extractContents() elimina el contenido seleccionado del DOM y contrae el rango al punto de inserción.

---

<div id="text">Select some of this text and press the button.</div>
<button onclick="highlightText()">Highlight</button>

<script>
function highlightText() {
  const selection = window.getSelection();
  if (!selection.rangeCount) return false;
  const range = selection.getRangeAt(0);
  const span = document.createElement('span');
  span.style.backgroundColor = 'yellow';
  const fragment = range.extractContents();
  span.appendChild(fragment);
  range.insertNode(span);
}
</script>

Try it Yourself »

Explorando la Interfaz Range

La interfaz Range representa un fragmento de un documento que puede contener nodos y partes de nodos de texto. Un rango se puede crear utilizando el método document.createRange().

Métodos de la Interfaz Range

• setStart(node, offset): Establece la posición de inicio del rango.
• setEnd(node, offset): Establece la posición de fin del rango.
• cloneRange(): Devuelve una copia del rango.
• deleteContents(): Elimina el contenido del rango del documento.
• insertNode(node): Inserta un nodo al inicio del rango.
• surroundContents(fragment): Reemplaza el contenido del rango con el fragmento proporcionado.

Ejemplo Práctico: Extraer Texto

A continuación se muestra un ejemplo de cómo extraer y manipular texto de un nodo específico utilizando la interfaz Range:

---

<div id="content">This is some sample text for extraction.</div>
<button onclick="extractText()">Extract and Manipulate</button>

<script>
function extractText() {
  const range = document.createRange();
  const content = document.getElementById('content');
  range.selectNodeContents(content);
  const extractedText = range.toString();
  const manipulatedText = extractedText.replace('sample', 'example'); // Manipulating text
  alert(manipulatedText);
}
</script>

Try it Yourself »

En el ejemplo anterior, el script reemplaza la palabra "sample" por "example" en el texto extraído antes de mostrarlo en una ventana de alerta. Esta es una manipulación básica, pero demuestra cómo puede comenzar a trabajar con el texto una vez extraído.

Operaciones Avanzadas de Texto

Más allá de la manipulación básica de texto, las interfaces Selection y Range permiten operaciones más complejas, como insertar nodos directamente en el documento.

Ejemplo: Insertar Texto

Este ejemplo demuestra un div editable donde el usuario puede hacer clic para establecer la posición del cursor. Una vez que se hace clic en el botón, se insertará 'Hello World' en la ubicación del cursor.

---

<div id="editable" contenteditable="true" style="border: 1px solid #ccc; padding: 10px; min-height: 50px;">
  Click here and set the cursor position.
</div>
<button onclick="insertText()">Insert 'Hello World'</button>

<script>
function insertText() {
  const editableDiv = document.getElementById('editable');
  const sel = window.getSelection();
  
  // Check if the selection is within the editable div
  if (!sel.rangeCount || !editableDiv.contains(sel.getRangeAt(0).commonAncestorContainer)) return;
  
  const range = sel.getRangeAt(0);
  range.deleteContents();  // Clears any selected text

  const textNode = document.createTextNode('Hello World');
  range.insertNode(textNode);

  sel.removeAllRanges();   // Clear the previous selection
  sel.addRange(range);     // Re-select the new text node
}
</script>

Try it Yourself »

Conclusión

Las interfaces Selection y Range proporcionan herramientas poderosas para manipular texto y selecciones de usuario en páginas web. Al comprender y utilizar estas herramientas, los desarrolladores pueden mejorar la interactividad y la experiencia del usuario en sus aplicaciones web. Ya sea que esté resaltando texto, extrayendo o insertando contenido, estas interfaces ofrecen la flexibilidad y el control necesarios para gestionar interacciones complejas de manera eficiente.

Práctica

¿Cuáles de las siguientes afirmaciones son ciertas sobre las interfaces Range y Selection de JavaScript?

El método `getSelection()` devuelve un objeto Selection que representa el rango de texto seleccionado por el usuario.El método `removeAllRanges()` elimina todos los rangos de la selección, no solo uno.El método `setEnd(node, offset)` permite que el offset cuente los nodos hijos si el nodo es un nodo de elemento.El método `deleteContents()` elimina el contenido del rango del documento sin devolverlo.El método `collapseToEnd()` contrae la selección actual al punto de inicio.