regex bzw replace

**Melewo** · 24.03.2013, 08:27

Was ist denn newText?
Ist doch nur eine Variable oder nicht?

Falls ja, dann benutzt Du doch für Links und für Image ein und dieselbe Variable. Ist doch klar, dass die sich da gegenseitig überschreiben, solltest da schon unterschiedliche benutzen. Es spricht zwar nichts dagegen, auf einen String replace mehrfach anzuwenden, jedoch nicht mit derartigen Ausdrücken. http\S+\ wobei S so ziemlich alles sein kann und eine Anzahl nicht vorgegeben wurde.

Edit: Jetzt habe ich einen Denkfehler gehabt, S sollte schon richtig sein. Muss das mal testen.
Ja, die überschreiben sich, doch so funktioniert es von der Reihenfolge.

HTML-Code:

<script type="text/javascript">
var text = "http://www.example.com/seite.html";
var bild = "http://www.example.com/einBild.jpg";
var newText, newBild;

newText = text.replace(/(http[s]?:\/\/[\S]+)/gi, "<a href='$1' target='_blank'>$1</a>");                            
newBild = bild.replace(/(http\S+\.(jpg|gif|png|bmp))/gim, "<img style='max-width:120px' max-width='120' src='$1' />");

document.write(newText+" - "+newBild);
</script>

Und so funktioniert es bei mir, wenn es sich um einen eingehenden String handelt.

Du wendest replace untereinander auf dieselbe var an, nicht aber hintereinander auf den String. Also müsste es wohl mit newText.replace bei der zweiten Prüfung richtig sein. Und ohne Angabe einer Endung, wie html|htm|php, wird ein Bild bereits bei der ersten Prüfung erkannt.

HTML-Code:

<script type="text/javascript">
var text = "...http://www.example.com/seite.html ... http://www.example.com/einBild.jpg...";
var newText, newStrg ;

newText = text.replace(/(http[s]?:\/\/[\S]+\.(html|htm|php))/gi, "<a href='$1' target='_blank'>$1</a>");                            
newStrg = newText.replace(/(http\S+\.(jpg|gif|png|bmp))/gim, "<img style='max-width:120px' max-width='120' src='$1' />");

document.write(newStrg);
</script>

**Marcus-24-D** · 24.03.2013, 13:52

Hey, danke für deine Antwort.
Dein Beispiel funktioniert eigentlich ganz gut.
Aber ein kleines manko ist dabei noch.
Sobald die URL nur Stiftung Warentest [www]test.de lautet, wird diese nicht als URI erkannt.
Hier ist es zwingend erforderlich, das die Dateiendung mit angegeben wird.
Cool wäre natürlich noch wie in diesem Forum auch, das der Seitentitel gleich mit erkannt wird.

In einem weiteren Schritt versuche ich YouTube einzubetten.
Auch das funktioniert leider nur sehr geringfügig.
Entweder das YouTube Video oder garnichts mehr

Hier mal mein jetziger Code:

Code:

<script type="text/javascript">

	var newText, newStrg ;

	newText = text.replace(/(http[s]?:\/\/[\S]+\.(html|htm|php))/gi, "<a href='$1' target='_blank'>$1</a>");                            
	newStrg = newText.replace(/(http\S+\.(jpg|gif|png|bmp))/gim, "<img style='max-width:300px' max-width='300' src='$1' />");
	
	var ytb = /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/;
  	if(newStrg.match(ytb)){
		  newStrg = '<iframe width="50" height="50" src="http://www.youtube.com/embed/'+RegExp.$1+'" frameborder="0" allowfullscreen></iframe>'  
		  }

  return newText = newStrg;

<script>

**Melewo** · 24.03.2013, 14:42

Ich weiß ja nicht so genau, was Du da vorhast, doch eventuell kommst Du mit den DOM-Methoden besser weg. RegEx ist gut, wenn etwas geprüft werden soll, wie Formulareingaben usw., doch wenn Du etwas auslesen möchtest, denke da ist unter Umständen DOM besser geeignet.

**Marcus-24-D** · 24.03.2013, 14:49

Also mein Vorhaben ist, das meine Besucher die Möglichkeit haben dürfen/sollen/können das zu posten was ihnen beliebt.
Das können Bilder sein, Texte und YouTube Videos halt.
Bei der Eingabe bzw. gestaltung Ihrer Anzeigen wird eine live Vorschau generiert
später das fertige Resultat an die Datenbank übergeben und auf der Seite angezeigt. Eigentlich ähnlich wie bei Facebook wenn mans ganz genau nimmt.
Darüber hinaus gibts dann später noch eine Kommentarfunktion. Aber das ist anderer Schuh der hier dann nicht mehr zur geltung kommt.

Regex brauch ich hier ja um zu erkennen, welche Eingaben der User macht.
Ich bin selbst nicht so der Javascript Guru und bin da etwas auf Hilfe , Tipps angewiesen. Vielleicht gibts ja auch eine Art Framework das mir diese Möglichkeiten bieten kann wie ich diese brauche.
Letztendlich gehts mir aber auch darum, das ganze doch lieber selbst zu erlernen und daher hab ich Frameworks im mom. nicht so gern.
Zudem wüsst ich jetzt auch nicht welches Framework ne fertige Version liefert die für meinen Anwendungsbereich in Frage kommen würde.

Danke dir

**Melewo** · 24.03.2013, 18:54

Das ist gar nicht so einfach. Wenn ich davon ausgehe, dass ein normaler Verweis mal so und mal so enden kann, dann schluck der Ausdruck wieder das Bild mit. Jedenfalls habe ich es nicht zufriedenstellend fertigbekommen, irgendetwas war immer zu viel oder zu wenig.

Würde Dir auch abraten, so soll es zum Beispiel möglich sein, in einem animierten Bild.gif Schadcode mit unterzubringen. Einen iFrame, der von außen etwas ladet, würde ich auch nicht unbedingt über den Weg trauen, wenn ich die Quelle nicht selbst ausgewählt hätte.

**Marcus-24-D** · 24.03.2013, 19:30

Nun ja, darum sollen ja auch nur videos von youtube möglich sein.
Wie soll ich das vid sonst einbetten?
Ich möchte jedenfalls solch eine Funktion das alles von dem gepostet werden kann. Um das ganze zu vereinfachen überlege ich die ganze Zeit schon,
ob ich das so handle, das wenn ein User ein youTube Vid postet und das erkannt wird die Textbox zu hiden bzw. zu entfernen.
Aber toll ist das wirklich nicht gerade. Vor allem weil man davon ausgehen kann, das der Ersteller dessen Threads noch selbst eine Bemerkung anfügen möchte.

Ok, vereinfache ich das einfach mal.
Wird im String ein YouTube Video erkannt, soll es wenigstens möglich sein einen weiteren Text hinzu zufügen.

Bei meinen jetzigen Versuchen klappt das leider nicht.
Jeder weitere hinzugefügte Text sieht das als Url an.

Code:

	var ytb = /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/;
  	if(text.match(ytb)){
		  newText = '<iframe width="450" src="http://www.youtube.com/embed/'+RegExp.$1+'" frameborder="0" allowfullscreen></iframe>' ;
		  return newText ; 
	}

Die Sache mit den gif Dateien lässt sich ja reduzieren.

**Melewo** · 24.03.2013, 20:00

Einfacher wäre es ja, wenn nur ein Quelltext durchzusehen ist, weil dann Ausdrücke wie diese genügen sollten. Auch die Tags für einen iFrame würden sich einfach finden lassen, wäre aber zu ungenau.

HTML-Code:

<script type="text/javascript">
var newText, newStrg;

var text = "...<a class='abc' href='http://www.example.com/seite.html'> ...";
    text += "... <img src='http://www.example.com/einbild.jpg' alt='' width='' height=''>... ";
          
newText = text.replace(/<a(.*?)href='(.+?)'(.*?)>/gi, "<a href='$2' target='_blank'>$2</a>");
newStrg = newText.replace(/<img(.*?)src='(.+?)'(.*?)>/gi, "<img style='max-width:120px' max-width='120' src='$2' />");

document.write(newStrg);
</script>

Mit den Gif belese Dich da mal noch etwas, ich hatte es nur so in Erinnerung, solltest Du vielleicht herausnehmen. Und wie soll das dann alles eingefügt werden, Formular ist klar, doch einen Wysiwyg als Formular? Oder für jedes Utensil ein eigenes Input-Element?

Falls ein Formular mit unterschiedlichen Input-Elementen für Grafiken, Videos usw. plus einer Textarea halt für die Kommentare, da könntest Du ja Element für Element überprüfen, ob nur das enthalten ist an Zeichen, was erlaubt ist.

Bei einem Wysiwyg sieht es nicht ganz so gut aus, doch da dann alle eingebetteten Elemente mit Tags enthalten sind, könntest Du die halt mit kürzeren Ausdrücken wie im Beispiel durchkämmen. Wäre mir nur etwas zu unsicher, müsste man wirklich mal sehen. Auch fällt der HTML-Quellcode etwas unterschiedlich aus, je nachdem in welchem Browser ein einfacher Wysiwyg benutzt wurde. Zumindest meiner verhält sich so, nur den habe ich keine Videos beigebracht.

**Marcus-24-D** · 24.03.2013, 23:04

nun ja, das wäre halt alles nicht so sehr komfortabel.
Ich separatiere das. Wird ein YouTube Vid gepostet, ist halt alles andere nicht mehr möglichbis auf Text.
Aber vielleicht kannst Du mir ja noch dabei helfen die zusätzliche Eingabe eines Textes zum YouTube Video zu ermöglichen?!

**Melewo** · 25.03.2013, 10:56

Na ja, ich würde mal davon ausgehen, dass es mit einem Formular beginnt und wenn da die Eingabe von Kommentaren usw. möglich sein sollen, wirst Du einen längeren Kommentar nicht wirklich per GET versenden wollen, da das einen mächtig langen QueryString ergeben würde. Somit blieben da POST oder DOM-Storage. Bei POST würde ja die Nachricht sowieso über den Server laufen und es könnte mit PHP gefiltert und weiterverarbeitet werden.

Bei DOM-Storage mit JS, doch erst einmal würde ich mich für eine Variante entscheiden. Ist jetzt nur ein einfaches Beispiel mit einen Inputfeld für einen Kurztext und ein paar Radio-Buttons,

Formulardaten verarbeiten mit JavaScript - Teil II - DOM-Storage | Coder-Welten.de

doch das sollte sich ausbauen lassen. DOM-Storage würde sich ohnehin nur für die Überprüfung und Vorschau eignen, da die Daten im Anschluss ja ob so oder so an Deinen Server übertragen werden müssen.

Oder habe ich jetzt einen Denkfehler?

Würde wohl mit POST, eventuell im Zusammenspiel mit einer Ajax-Lösung, beginnen, so dass die Daten zwar von PHP geprüft und verarbeitet werden können, doch in eine Vorschau geladen werden können, ohne die Seite neu zu laden. Ohne Ajax geht es aber auch, soll heißen, benutze ich bei meinen Formularen auch nicht für eine Vorschau, doch die Daten werden nicht nur in die Vorschau, sondern gleichzeitig erneut in den input-Feldern vom Formular geladen.

**Marcus-24-D** · 25.03.2013, 11:59

ich glaube wir verstehen uns gerade nicht

klar könnte ich am rande des DOM´s programmieren, aber ist ja garnicht nötig denke ich

Nochmal von vorn

Das Anliegen hat sich ja jetzt bereits geändert. Ich sehe die komplexität des
vorhabens ein und ich bin dem anscheinend noch nicht gewachsen.

Also ich hab das nun folgendermaßen vor.
So sieht erstmal das Anzeigebeispiel aus:

vorschaubox

HTML-Code:

<div id="msgBox" style="width:300px; height:auto; min-height:50px; ">
    <!-- invisible youtube box -->
    <div id="ytbContainer" style="width:300px; height:auto; display:none;>
</div>

Per Javascript lasse ich jetzt erkennen ob die Eingabe vom User ein YouTube Video ist oder nicht. Wenn ja, prüfe ich den string und setzte einen Eingangscounter der verhindern soll, das weitere YouTube Videos angefügt werden. ytbCount = 1;

Dann wird das Ergebnis in den Container ytbBox geschrieben und angezeigt.
Will der User jetzt doch ein anderes Video einbetten, muss die ytbBox geleert
werden bzw. das Video gelöscht und die Eingangsvariable zurückgesetzt werden.

Und hier meine vollständige Funktion:

Code:

//settings
var newText, newStrg, getYtb, setYtb;

//youtube
var ytbCount = 1;

	function parseTextToLinks(text){
	
	var ytb = /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/;
  	if(text.match(ytb) && ytbCount == 1){
		  getYtb = '<iframe width="390" src="http://www.youtube.com/embed/'+RegExp.$1+'" frameborder="0" allowfullscreen></iframe>' ;

			
		  //weiteres nicht möglich
		  	ytbCount = 0;
			
						
                 //funktioniert noch nicht weil ytBContainer nicht bekannt ist
		document.getElementById("ytbContainer").innerHTML = getYtb;
		document.getElementById("ytbContainer").style.display = "block";

                return false;
				
	}
	else{
	//wenn kein youtube video erkannt wurde
	newText = text.replace(/(http[s]?:\/\/[\S]+\.(html|htm|php))/gi, "<a href='$1' target='_blank'>$1</a>");                            
	newStrg = newText.replace(/(http\S+\.(jpg|gif|png|bmp))/gim, "<img style='max-width:300px' max-width='300' src='$1' />");
	
	
	return newText = newStrg;
	}

}

Das aktuelle Problem welches ich gerade habe ist, das ytbContainer
für JS nicht bekannt ist und ich nicht weiß wie ich den Wert zur Anzeige nun in das Div Element bekomme.
Ich muss dazu erwähnen, das sich dieser Teil der Funktion im <head> Bereich meiner Seite befindet. Wenn ich die Funktion unterhalb also am Ende meiner Seite platziere, funktioniert das nicht und spukt mir Fehlermeldungen aus.

Das fertige Resultat später übergebe ich mit Ajax per post.

**Melewo** · 25.03.2013, 13:19

Zitat von Marcus-24-D Beitrag anzeigen

ich glaube wir verstehen uns gerade nicht

Ja, weil ich nicht verstehe, wo text herkommt. Hatte nur mal so nebenbei versucht

HTML-Code:

var text = "<iframe width="420"

zu filtern, doch ohne Formular müsste ich ja Text im String manuell maskieren, mit Formular eventuell mit escape(), wobei ich mir gerade nicht schlüssig bin, in wieweit dann das Ergebnis beeinflusst wird, ob da erst wieder unescape angewendet werden muss oder wie auch immer. Was wendest Du bei Übermittlung von Text an? escape()?

Zitat von Marcus-24-D Beitrag anzeigen

Ich muss dazu erwähnen, das sich dieser Teil der Funktion im <head> Bereich meiner Seite befindet. Wenn ich die Funktion unterhalb also am Ende meiner Seite platziere, funktioniert das nicht und spukt mir Fehlermeldungen aus.

Nun ja, es kommt weniger darauf an, wo sich eine Funktion befindet, die lassen sich auch auslagern, es kommt mehr darauf an, wo und in welcher Reihenfolge Funktionen aufgerufen werden. Beispiel:

HTML-Code:

<!DOCTYPE html>
<html>

<head>
<title>Testseite</title>
</head>

<body style="text-align:center">
<input type="button" name="EinName" value="Test">
<div id="ytbContainer">Platzhalter</div>

<script type="text/javascript">
var eingabe = "<iframe width=\"420\" height=\"315\" src=\"http://www.youtube.com/embed/f16IMnWJTc0\" frameborder=\"0\" allowfullscreen></iframe>";

function parseTextToLinks(){

    var ausg = document.getElementById("ytbContainer");

    var youtube = /(www\.youtube\.com|youtu.be)/;
    var testerg = youtube.test(eingabe);

    if (testerg != false) ausg.innerHTML = "Tolles Video";
    else  ausg.innerHTML = "Das war wohl nichts";
}

onclick = function() {

    parseTextToLinks(eingabe);
}
</script>
</body>
</html>

Und nun stelle Dir vor, Du lässt bei if statt sofortiger Ausgabe einen Anweisungsblock folgen, der weitere if-Statements enthält, um die Überprüfung zu erweitern und zu verfeinern.

Ich müsste mich diese Woche eigentlich noch um einige unliebsamer Nebensächlichkeiten kümmern, weiß noch nicht, wie ich dazu kommen werde, einiges durchzutesten. Innerhalb einer Funktion mit var ausgewiesene Variablen sind local, fehlt das var, werden auch diese global. Wenn alles fertig ist, aber erst dann, mal zu Beginn des Script-Bereiches "use strict"; einfügen und die Seite im FF aufrufen, dann geben sich fehlerhaft deklarierte Variablen durch Versagen des Scripts zu erkennen.

HTML-Code:

<script type="text/javascript">
"use strict";

**Marcus-24-D** · 25.03.2013, 13:55

Naja, ich habs jetzt halbwegs zufriedenstellend hinbekommen.
Ich hab einfach ne neue Funktin kreiert und übergebe den Wert.

Der Text wird alle 3 Sekunden aus einer Textarea geladen.

Code:

<script type="text/javascript">

document.getElementById("hitus").onclick = testBoxSize;
var getHitUsText, getNewText, hitUsBox;
function testBoxSize(){
	
	//box anzeigen
	document.getElementById("liveBox").style.display = "block";

	//box vergößern
	hitUsBox = document.getElementById("winHitus").style.height;
	if(hitUsBox == "auto") {	
	document.getElementById("hitus").style.height='100px';	
	}
}

function getHitus(){
			
		getHitUsText = document.getElementById("hitus").value;
		
		getNewText = parseTextToLinks(getHitUsText);
			
		document.getElementById("winHitus").innerHTML = getNewText;
			
}

function ytbOpen(getYtb){
	document.getElementById("ytbContainer").innerHTML = getYtb;
	document.getElementById("ytbContainer").style.display = "block";
	
}

	setInterval(function(){
		
		getHitus();

		},3000);

</script>

**Marcus-24-D** · 25.03.2013, 14:05

ups mom..jetzt hb ich deinen code ignoriert...

ich werd das gleich mal ausprobieren

Code:

<script type="text/javascript">
var eingabe = "<iframe width=\"420\" height=\"315\" src=\"http://www.youtube.com/embed/f16IMnWJTc0\" frameborder=\"0\" allowfullscreen></iframe>";

function parseTextToLinks(){

    var ausg = document.getElementById("ytbContainer");

    var youtube = /(www\.youtube\.com|youtu.be)/;
    var testerg = youtube.test(eingabe);

    if (testerg != false) ausg.innerHTML = "Tolles Video";
    else  ausg.innerHTML = "Das war wohl nichts";
}

onclick = function() {

    parseTextToLinks(eingabe);
}
</script>

Ich wusste garnicht das man das so direkt vergleichen kann

**Marcus-24-D** · 25.03.2013, 15:38

so, sry..da hab ich deine Sache irgendwie übersehen.

Also ansicht find ich den Ansatz schonmal ziemlich gut.
Und die Art der programmierung gefällt mir auch besser.
Werd ich mir versuch mal anzueignen

Ich hab vollständigkeitshalber jetzt mal ein ganzes Dokument angelegt, damit
es keine Missverständnisse mehr gibt und wir da irgendwo auf dem selben Stand sind.
Ich hab die Sache auch gleich mal überarbeitet und das sieht jetzt vollständig so aus:

HTML-Code:

<html>
<head>
<style>
#liveBox{
	display:none;

	width:440px; 
	min-height:50px; 
	height:auto; 
	border:#000 1px dotted; 
	background-color:#FFFFFF;
}

#ytbContainer{
	display:none; 
	width:390px;
	height:auto;	
}
</style>

<script type="text/javascript">

var youTube = 1;

function parseTextToLinks(){

    var ausgLiveBox = document.getElementById("liveBox");
    var ausgYouTubeContainer = document.getElementById("ytbContainer");

    var youtube = /(www\.youtube\.com|youtu.be)/;
	var eingabe = document.getElementById("input").value;
    var testerg = youtube.test(eingabe);

    if (testerg != false && youTube == 1){
			 	 
		var getVidId = /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/;
  		if(eingabe.match(getVidId)){
			ausgYouTubeContainer.innerHTML = '<iframe width="440" src="http://www.youtube.com/embed/'+RegExp.$1+'" frameborder="0" allowfullscreen></iframe>' ;
			ausgYouTubeContainer.style.display = "block";
		}

			youTube = 0;}
	 
    else{
		newText = eingabe.replace(/(http[s]?:\/\/[\S]+\.(html|htm|php))/gi, "<a href='$1' target='_blank'>$1</a>");                            
		newStrg = newText.replace(/(http\S+\.(jpg|gif|png|bmp))/gim, "<img style='max-width:300px' max-width='300' src='$1' />");
		
		ausgLiveBox.innerHTML = newStrg;
	}
}

		setInterval(function(){
		
			parseTextToLinks();

		},3000);

</script>

</head>

<body>

<div id="ytbContainer"></div>
<div id="liveBox"></div>
       
                  
       <textarea style=" width:440px;" name="input" cols="70" rows="2" wrap="physical" id="input">http://www.youtube.com/watch?v=FSLQzjFePxM</textarea>
                  
<script type="text/javascript">

document.getElementById("input").onclick = testBoxSize;

function testBoxSize(){
	
	//box anzeigen
	document.getElementById("liveBox").style.display = "block";

	//eingabe box vergößern
	liveBox = document.getElementById("liveBox").style.height;
	if(liveBox == "auto") {	
	document.getElementById("input").style.height='100px';	
	}
}
</script>
</body>
</html>

Aber wie gehts nun weiter?
In den nächsten 3 Sekunden wird ja erkannt das ein YouTube Video bereits gepostet wurde, das ist das einfachste Problem.
Die Variable zurücksetzen und den Inhalt löschen wenn der User das Video ändern will.

Bei den Links hapert es immernoch.
Text, Bilder und Links werden zwar gesetzt, aber sobald es sich hier um ein YouTube Video handelt wird dieser nicht als Link angezeigt,
weil hier ja auf Dateiendung geprüft wird. Irgendwie muss das noch etwas besser werden.
Die meisten der Besucher werden garantiert www . hastenichtgesehn . de eingeben

Wird geladen... Bitte warte.

regex bzw replace

regex bzw replace

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar

Kommentar