Ejercicio: Realización de un desafío para extraer, reemplazar y quitar datos de una cadena de entrada

Completado

Los desafíos del código refuerzan el aprendizaje y ayudan a obtener cierta confianza antes de continuar.

En este desafío, trabajará con una cadena que contiene un fragmento de HTML. Extraes datos del fragmento HTML, reemplazas parte de su contenido y eliminas otras partes para obtener el resultado deseado.

Si no está familiarizado con el código HTML, revise la sección "Inicio rápido de HTML" al final de esta unidad.

Extracción, reemplazo y eliminación de datos de una cadena de entrada

1. Seleccione y elimine todas las líneas de código del editor de Visual Studio Code.

2. En Visual Studio Code, agregue el código "starter" siguiente para obtener los datos del desafío:

   const string input = "<div><h2>Widgets &trade;</h2><span>5000</span></div>";
   
   string quantity = "";
   string output = "";
   
   // Your work here
   
   Console.WriteLine(quantity);
   Console.WriteLine(output);
   

   Si ejecuta el código, la salida muestra líneas en blanco, los valores iniciales de quantity y output son valores vacíos string .

3. Dedique un minuto a revisar la línea inicial del código que contiene un string de HTML.

   const string input = "<div><h2>Widgets &trade;</h2><span>5000</span></div>";
   

   Observe las etiquetas:<div>,<h2>,<span> y el código de símbolo ™ contenidos en la variable input.

4. Examine la salida deseada para la salida final del programa:

   Quantity: 5000
   Output: <h2>Widgets &reg;</h2><span>5000</span>
   

5. Comience a agregar el código de la solución al código de inicio en el comentario // Your work here.

6. Establezca la variable quantity en el valor obtenido mediante la extracción del texto entre las etiquetas <span> y </span>.

7. Establezca la variable output al valor de input, y a continuación, quite las etiquetas <div> y </div>.

8. Reemplace el carácter HTML ™ (™) por ® (®) en la variable output.

9. Ejecute la solución y compruebe que la salida coincide con la salida esperada.

   Quantity: 5000
   Output: <h2>Widgets &reg;</h2><span>5000</span>
   

Tanto si tiene dificultades y necesita echar un vistazo a la solución como si finaliza el ejercicio correctamente, continúe para ver una solución a este desafío.

Primer html rápido

En caso de que no esté familiarizado con HTML, es el lenguaje de marcado que se usa para crear todas las páginas web. Omita esta sección si tiene una buena comprensión de HTML. La información está diseñada para proporcionar suficiente información para completar este desafío y no para ser un tutorial HTML completo.

En HTML, se define la estructura de un documento mediante etiquetas. Una etiqueta se compone de:

• un corchete angular de apertura <
• un corchete angular de cierre >
• una palabra que describe el tipo de etiqueta, por ejemplo: <div>, <span>, etc <h2> .

Cada etiqueta tiene una etiqueta de cierre correspondiente que presenta un carácter de barra diagonal /. Por lo tanto, si ve <div>, debería haber una etiqueta correspondiente </div>.

El contenido entre la etiqueta de apertura y cierre es el contenido de esa etiqueta. El contenido puede incluir texto y otras etiquetas.

Un conjunto de etiquetas se puede incrustar dentro de otro conjunto de etiquetas, lo que proporciona a un documento HTML su estructura jerárquica.