jQuery / .html() y .text()

Bienvenidos sean a este post, hoy veremos dos metodos para manipular texto.

Estas dos funciones nos permiten obtener o escribir texto en elementos de la pagina, algo similar a las propiedades innerHTML e innerText, pero vamos a ver como trabaja cada uno de ello y para entenderlo vamos a trabajar con el codigo que vimos en el post anterior, en caso de no tener este codigo les dejo un link con todos los archivos:

Simplemente extraigan los archivos de este en un directorio, una vez realizado vamos al archivo libro.html y modificaremos el siguiente parrafo:

<p><span class="extracto-ejemplo">Durante el invierno de 1927-28, los agentes del Gobierno Federal realizaron una extraña y secreta investigación sobre ciertas instalaciones del antiguo puerto marítimo de Innsmouth</span>, en <a href="https://www.mass.gov/">Massachusetts</a>. El público se enteró de ello en febrero, porque fue entonces cuando se llevaron a cabo redadas y numerosos arrestos, seguidos del incendio y la voladura sistemáticos -efectuados con las precauciones convenientes- de una gran cantidad de casas ruinosas, carcomidas, supuestamente deshabitadas, que se alzaban a lo largo del abandonado barrio del muelle. Las personas poco curiosas no prestarían atención a este suceso, y lo consideraron sin duda como un episodio más de la larga lucha contra el licor.</p>

De la siguiente manera:

<p><span class="extracto-ejemplo">Durante el invierno de 1927-28, los agentes del <span class="evitar">Gobierno Federal</span> realizaron una <strong>extraña y secreta</strong> investigación</span> sobre ciertas instalaciones del antiguo puerto marítimo de Innsmouth, en <a href="https://www.mass.gov/">Massachusetts</a>. El público se enteró de ello en febrero, porque fue entonces cuando se llevaron a cabo redadas y numerosos arrestos, seguidos del incendio y la voladura sistemáticos -efectuados con las precauciones convenientes- de una gran cantidad de casas ruinosas, carcomidas, supuestamente deshabitadas, que se alzaban a lo largo del abandonado barrio del muelle. Las personas poco curiosas no prestarían atención a este suceso, y lo consideraron sin duda como un episodio más de la larga lucha contra el licor.</p>

En este caso primero agregamos otro span con la clase evitar a las palabras Gobierno y Federal, despues agregamos otro tag de tipo strong sobre algunas palabras y a su vez reducimos el texto tomado por el tag span extraer, el resto sigue igual, nuestro siguiente paso sera hacer un metodo para reemplazar esas palabra por unos puntos suspensivos, para ello vamos al archivo codigo.js y modificaremos este bloque de codigo:

$(document).ready(function() {
	$('span.extracto-ejemplo').each(function(index) {
		var $parienteParrafo = $(this).parent('p');
		$parienteParrafo.css('position','relative');
		var $copia = $(this).clone();
		$copia
			.addClass('extracto')
			.prependTo($parienteParrafo);
	});
});

De la siguiente manera:

$(document).ready(function() {
	$('span.extracto-ejemplo').each(function(index) {
		var $parienteParrafo = $(this).parent('p');
		$parienteParrafo.css('position','relative');
		var $copia = $(this).clone();
		$copia
			.addClass('extracto')
			.find('span.evitar')
				.html('…')
			.end()
			.prependTo($parienteParrafo);
	});
});

En este caso solo agregamos un llamado a la funcion find para buscar al nuevo span, una vez encontrado por medio del metodo html la reemplazaremos por el codigo que equivale a los puntos suspensivos, y el metodo end nos saca del find y nos devuelve a donde estabamos para continuar la ejecucion, si cargamos la pagina se vera de la siguiente forma

Observen como el texto original sigue siendo el mismo, con la modificacion para mostrar las palabras en negrita, pero si observan el extracto se reemplazaron las palabras por los puntos suspensivos, el metodo text tambien trabaja con texto pero a diferencia del metodo html solo con texto plano, por lo tanto si pasamos cualquier codigo HTML de caracteres mostrara la palabra y no su equivalente, como vimos en el ejemplo anterior, por ejemplo si cambiamos del codigo anterior la siguiente linea:

.html('…')

Por esta:

.text('…')

La pagina se mostrara de la sigueinte forma

Si bien pueden considerar que esto no es beneficioso pero en realidad si lo es porque nos permite eliminar tags que puede no ser necesarios para determinados temas, o algunos que puedan quedar inconclusos, dando mal aspecto, pero para ello vamos a tomar el codigo que trabajamos y lo modificaremos de la siguiente manera:

$(document).ready(function() {
	$('span.extracto-ejemplo').each(function(index) {
		var $parienteParrafo = $(this).parent('p');
		$parienteParrafo.css('position','relative');
		var $copia = $(this).clone();
		$copia
			.addClass('extracto')
			.find('span.evitar')
				.html('…')
			.end()
			.text($copia.text())
			.prependTo($parienteParrafo);
	});
});

En este caso reestablecimos el html que reemplazamos con el text y hasta el end seguimos igual que antes, pero ahora agregamos un metodo text donde le pasamos la variable donde esta almacenada la copia del tag padre y de ahi extraeremos el texto de este para mostrarlo y despues seguimos con la misma accion para agregarlo, ahora si probamos la pagina se vera de la siguiente forma

Como pueden ver ahora funciono correctamente nos mantuvo el codigo reemplazado pero nos muestra el texto pelado, por eso existen y deben ajustarse a sus necesidades, si tienen que mostrar codigo HTML es preferible usar al metodo html pero si necesitamos limpiar el texto de todos estos elementos para alguna razon X es preferible usar a text, antes de finalizar les dejo un link con todos los codigos finales de este post:

En resumen, hoy hemos visto los metodos html y text, ambos sirven para recuperar y escribir texto en ambos casos pero el metodo html mantiene y convierte los codigos HTML en general y el metodo text en cambio solo muestra el texto plano y no interpreta los codigo HTML, sus pros y contras asi como sus diferencias, espero les haya sido util sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.