✔ Text-String mit Bild (Smiley) ersetzen

deb_ugger

deb_ugger

Erfahrenes Mitglied
Hallo,

ich habe eine kleine Chat-Applikation in AJAX/PHP geschrieben und ein eigenes Smiley-Iconset gestaltet. Ich möchte nun Strings wie :) oder :( von Javascript erkennen lassen und mit den entsprechenden Grafiken austauschen. Hiefür hab ich ein Script geschrieben, was leider nicht so funktioniert wies sollte. Es findet nämlich keinen match.

Code: 
<html>
<head>
	<title>Smiley Test</title>
	<script>
	function showSmiley() {
	 	var smileys = new Array();
		smileys[':)'] = 'icon_lol.gif';
		smileys[':('] = 'icon_sad.gif';
	
	 	var str = document.getElementById('text').innerHTML;

		for (key in smileys) {
			smiley = new RegExp('<img src="img/smileys/' + smileys[key] + '">', 'gi');
			newstr = str.replace(smiley, key);
		}
		
		document.getElementById('text_result').innerHTML = newstr;
	}
	
	</script>
</head>
<body>

<div id="text">das ist der text :)</div>
<br />
<div id="text_result"></div>
<br />
<br />
<a href="javascript:;" onClick="showSmiley()">Show Text with Smileys!</a>
</body>
</html>

Kann mir da jemand weiterhelfen? Danke!

Grüße,
debugger
 
Hi!
Versuchs doch mal so (oder so ähnlich):

Code: 
<html>
<head>
	<title>Smiley Test</title>
	<script type="text/javascript">
	function showSmiley() {
	 	var smileys = new Object();
		smileys[':\\)'] = 'icon_lol.gif';
		smileys[':\\('] = 'icon_sad.gif';
	
		for (value in smileys) {
			var s = document.getElementById('text').innerHTML;
			smiley = "<img src='img/smileys/" + smileys[value] + "'>";
			var search = RegExp("[.*]?("+ value +")[.*]?","i");
			newstr = s.replace(search, smiley);
			document.getElementById('text').innerHTML = newstr;
		}
		
		
	}
	
	</script>
</head>
<body>

<div id="text">das ist der text :) :(</div>
<a href="javascript:;" onClick="showSmiley()">Show Text with Smileys!</a>
</body>
</html>
Hoffe ich konnte dir helfen da regex nicht undbedingt meine stärke sind :)
 
Hi!

Das klappt schon viel besser. Danke! Ein problem waren die Klammern. Jetzt hab ich noch ein anderes Problem. Ich rufe die Funktion über eine andere Funktion auf und gebe den Wert mittels "return" zurück. Leider wird dann nur mehr ein Zeichen ersetzt. Immer jenes, das im Object() als erstes definiert wurde. Hier "icon_lol.gif". Bei allen weiteren passiert nichts.

Kann mir da jemand weiterhelfen? Danke!!

Code: 
<html>
<head>
	<title>Smiley Test</title>
	<script>
	
	function showSmiley(string) {
	 	var smileys = new Object();
		smileys[':\\)'] = 'icon_lol.gif';
		smileys[':\\('] = 'icon_sad.gif';
		
		for (value in smileys) {
			smiley = "<img src='img/smileys/" + smileys[value] + "'>";
			var search = RegExp("[.*]?("+ value +")[.*]?","i");
			newstr = string.replace(search, smiley);
			return newstr;
		}
	}

	function tuwas() {
		string = document.getElementById('text').innerHTML;
		string = showSmiley(string);
		document.getElementById('text').innerHTML = string;
	}
	
	</script>
</head>
<body onLoad="tuwas()">

<div id="text">das ist :( der text :)</div>

</body>
</html>
 
Hi,

zunächst muss das return nach der for .. in-Schleife notiert werden. Weiterhin muss der String mit den Ersetzungen der gleiche sein, wie der in dem ersetzt wird. Nur so wird gewährleistet, dass alle notwendigen Ersetzungen durchgeführt werden.
Code: 
function showSmiley(string) {
  var smileys = new Object();
  smileys[':\\)'] = 'icon_lol.gif';
  smileys[':\\('] = 'icon_sad.gif';

  for (value in smileys) {
    smiley = "<img src='img/smileys/" + smileys[value] + "'>";
    var search = RegExp("[.*]?("+ value +")[.*]?","i");
    string = string.replace(search, smiley);
  }

  return string;
}
Ciao
Quaese
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück