Uprava textu v JS

3. 4. 2008 21:47:51

Zdravím,

mám následující problém:

Řekněme, že v p#text mám nějaký text a potřebuji javascriptem přistoupit k n-tému znaku textu a obalit ho do spanu (tím ho obarvit).

Prozatím používám tohle, ale vůbec se mi to nelíbí:

Pak prostě vezmu ten span, co potřebuju a přidám mu třídu.

Raději bych nějaké jednoduché řešení v javascriptu, preferuji jquery...

Díky za nápady :thumbup:

3. 4. 2008 21:47:51

https://webtrh.cz/diskuse/uprava-textu-v-js#reply57551

milan

4. 4. 2008 09:04:05

Když se chce, všechno jde. Bohužel v jQuery jsou selektory jen na DOM objekty a ne jejich obsah. Co si někam schovat text a pak vytrhávat písmenka:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <script type="text/javascript" src="jquery.js"></script>
</head>
<style> span {color:red;font-weight:bold;background:black;} </style>
<script>
	(function($) {
		$.fn.extend({
			animateLetters:function() {return $.animateLetters(this);}
		});
		
		$.animateLetters = function(el) {
			if (el.al != undefined) {
				return;
			}
			el.al = el.html();
			el.alpos = 0;
			el.timer = setInterval(function(){animate(el);}, 50);
		}
		function animate(el) {
			p = el.alpos; 
			s = el.al;
			el.html(s.substring(0, p) + '<span>' + s.substring(p, p+1) + '</span>' + s.substring(p+1));
			el.alpos++;
			if (el.alpos >= s.length) el.alpos = 0;
		}
	})(jQuery);
	
	$(document).ready(function() {
   		$("#text").animateLetters();
   		$("#longtext").animateLetters();
 	});
</script>
<body>
	<p id="text">Curabitur suscipit purus a sapien. Fusce vitae nisi.</p>
	<p id="longtext">Mauris convallis accumsan sapien. Nulla fringilla est et arcu. Curabitur suscipit purus a sapien. Fusce vitae nisi in est condimentum interdum. Nunc tempus. Vestibulum a tellus. Aliquam turpis.</p>
</body>
</html>

4. 4. 2008 09:04:05