php-resource



Zurück   PHP-Scripte PHP-Tutorials PHP-Jobs und vieles mehr > Entwicklung > HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS
 

Login

 
eingeloggt bleiben
star Jetzt registrieren   star Passwort vergessen
 

 

 


HTML, JavaScript, AJAX, jQuery, CSS, Bootstrap, LESS Probleme mit HTML5, Bootstrap oder jQuery ?

Antwort
 
LinkBack Themen-Optionen Thema bewerten
  #1 (permalink)  
Alt 24-03-2013, 01:28
Marcus-24-D
 Registrierter Benutzer
Links : Onlinestatus : Marcus-24-D ist offline
Registriert seit: Oct 2007
Beiträge: 173
Marcus-24-D befindet sich auf einem aufstrebenden Ast
Standard regex bzw replace

Nabend,

ich versuche eine Funktion zu kreieren die Bilder und Links automatisch erkennt.

Ich scheitere generell daran, das wenn zuerst ein Bild gepostet wird und dann ein Link im selben Eingabefenster,
das das Bild zwar angezeigt wird, aber der Link nicht mehr als Link. Umgekehrt geht der Link aber das Bild nicht.

Hier mein Ansatz und ich probiere schon seit stunden und komme auf keine geeignete Logik. Hoffe ihr könnt helfen.

Code:
// check for urls
newText = text.replace(/(http[s]?:\/\/[\S]+)/gi, 
"<a href='$1' target='_blank'>$1</a>");


// check for images
if( 
text.search(/.gif/i) > -1 || 
text.search(/.jpg/i) > -1 || 
text.search(/.png/i) > -1 ){							
     newText = text.replace(/(http\S+\.(jpg|gif|png|bmp))/gim,'
     <img style="max-width:120px " max-width="120" src="$1" />');
}
Ich danke für eure Hilfe
Mit Zitat antworten
  #2 (permalink)  
Alt 24-03-2013, 09:27
Melewo
 Registrierter Benutzer
Links : Onlinestatus : Melewo ist offline
Registriert seit: Jan 2013
Beiträge: 365
Melewo befindet sich auf einem aufstrebenden Ast
Standard

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>

Geändert von Melewo (24-03-2013 um 10:46 Uhr)
Mit Zitat antworten
  #3 (permalink)  
Alt 24-03-2013, 14:52
Marcus-24-D
 Registrierter Benutzer
Links : Onlinestatus : Marcus-24-D ist offline
Registriert seit: Oct 2007
Beiträge: 173
Marcus-24-D befindet sich auf einem aufstrebenden Ast
Standard

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>
Mit Zitat antworten
  #4 (permalink)  
Alt 24-03-2013, 15:42
Melewo
 Registrierter Benutzer
Links : Onlinestatus : Melewo ist offline
Registriert seit: Jan 2013
Beiträge: 365
Melewo befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #5 (permalink)  
Alt 24-03-2013, 15:49
Marcus-24-D
 Registrierter Benutzer
Links : Onlinestatus : Marcus-24-D ist offline
Registriert seit: Oct 2007
Beiträge: 173
Marcus-24-D befindet sich auf einem aufstrebenden Ast
Standard

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
Mit Zitat antworten
  #6 (permalink)  
Alt 24-03-2013, 19:54
Melewo
 Registrierter Benutzer
Links : Onlinestatus : Melewo ist offline
Registriert seit: Jan 2013
Beiträge: 365
Melewo befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #7 (permalink)  
Alt 24-03-2013, 20:30
Marcus-24-D
 Registrierter Benutzer
Links : Onlinestatus : Marcus-24-D ist offline
Registriert seit: Oct 2007
Beiträge: 173
Marcus-24-D befindet sich auf einem aufstrebenden Ast
Standard

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.
Mit Zitat antworten
  #8 (permalink)  
Alt 24-03-2013, 21:00
Melewo
 Registrierter Benutzer
Links : Onlinestatus : Melewo ist offline
Registriert seit: Jan 2013
Beiträge: 365
Melewo befindet sich auf einem aufstrebenden Ast
Standard

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.

Geändert von Melewo (24-03-2013 um 21:23 Uhr)
Mit Zitat antworten
  #9 (permalink)  
Alt 25-03-2013, 00:04
Marcus-24-D
 Registrierter Benutzer
Links : Onlinestatus : Marcus-24-D ist offline
Registriert seit: Oct 2007
Beiträge: 173
Marcus-24-D befindet sich auf einem aufstrebenden Ast
Standard

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?!
Mit Zitat antworten
  #10 (permalink)  
Alt 25-03-2013, 11:56
Melewo
 Registrierter Benutzer
Links : Onlinestatus : Melewo ist offline
Registriert seit: Jan 2013
Beiträge: 365
Melewo befindet sich auf einem aufstrebenden Ast
Standard

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.

Geändert von Melewo (25-03-2013 um 12:25 Uhr)
Mit Zitat antworten
  #11 (permalink)  
Alt 25-03-2013, 12:59
Marcus-24-D
 Registrierter Benutzer
Links : Onlinestatus : Marcus-24-D ist offline
Registriert seit: Oct 2007
Beiträge: 173
Marcus-24-D befindet sich auf einem aufstrebenden Ast
Standard

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.

Geändert von Marcus-24-D (25-03-2013 um 13:26 Uhr)
Mit Zitat antworten
  #12 (permalink)  
Alt 25-03-2013, 14:19
Melewo
 Registrierter Benutzer
Links : Onlinestatus : Melewo ist offline
Registriert seit: Jan 2013
Beiträge: 365
Melewo befindet sich auf einem aufstrebenden Ast
Standard

Zitat:
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:
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";

Geändert von Melewo (25-03-2013 um 14:56 Uhr)
Mit Zitat antworten
  #13 (permalink)  
Alt 25-03-2013, 14:55
Marcus-24-D
 Registrierter Benutzer
Links : Onlinestatus : Marcus-24-D ist offline
Registriert seit: Oct 2007
Beiträge: 173
Marcus-24-D befindet sich auf einem aufstrebenden Ast
Standard

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>
Mit Zitat antworten
  #14 (permalink)  
Alt 25-03-2013, 15:05
Marcus-24-D
 Registrierter Benutzer
Links : Onlinestatus : Marcus-24-D ist offline
Registriert seit: Oct 2007
Beiträge: 173
Marcus-24-D befindet sich auf einem aufstrebenden Ast
Standard

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

Geändert von Marcus-24-D (25-03-2013 um 15:16 Uhr)
Mit Zitat antworten
  #15 (permalink)  
Alt 25-03-2013, 16:38
Marcus-24-D
 Registrierter Benutzer
Links : Onlinestatus : Marcus-24-D ist offline
Registriert seit: Oct 2007
Beiträge: 173
Marcus-24-D befindet sich auf einem aufstrebenden Ast
Standard

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

Geändert von Marcus-24-D (25-03-2013 um 16:51 Uhr)
Mit Zitat antworten
Antwort

Lesezeichen


Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)
 

Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
preg_replace bzw. Regex sk299 PHP Developer Forum 5 31-03-2008 22:07
explode() in mysql / bzw. regex hell SQL / Datenbanken 2 25-05-2006 19:08
REPLACE und Regex? syco23 SQL / Datenbanken 4 11-06-2005 22:24
[REGEX] replace mit unterausdrücken derHund BRAINSTORMING PHP/SQL/HTML/JS/CSS 8 19-07-2004 19:52
Wildcard bei UPDATE bzw. REPLACE? Syntax? JogiWebster SQL / Datenbanken 13 02-09-2003 17:16

Themen-Optionen
Thema bewerten
Thema bewerten:

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are an


PHP News

ebiz-trader 7.5.0 mit PHP7 Unterstützung veröffentlicht
ebiz-trader 7.5.0 mit PHP7 Unterstützung veröffentlichtDie bekannte Marktplatzsoftware ebiz-trader ist in der Version 7.5.0 veröffentlicht worden.

28.05.2018 | Berni

Wissensbestand in Unternehmen
Wissensbestand in UnternehmenLebenslanges Lernen und Weiterbilden sichert Wissensbestand in Unternehmen

25.05.2018 | Berni


 

Aktuelle PHP Scripte

ADSMAN V3 - Werbe-Manager ansehen ADSMAN V3 - Werbe-Manager

ADSMAN V3 - mehr als nur ein Bannermanager! Banner, Textanzeigen und PagePeel Manager! Mit ADSMAN PRO haben Sie die Marketinglösung für eine effektive und effiziente Werbeschaltung mit messbaren Ergebnissen. Unterstützt werden Bannerformate in beliebi

25.10.2018 virtualsystem | Kategorie: PHP/ Bannerverwaltung
PHP News und Artikel Script V2

News schreiben, verwalten, veröffentlichen. Dies ist jetzt mit dem neuen PHP News & Artikel System von virtualsystem.de noch einfacher. Die integrierte Multi-User-Funktion und der WYSIWYG-Editor (MS-Office ähnliche Bedienung) ermöglichen...

25.10.2018 virtualsystem | Kategorie: PHP/ News
Top-Side Guestbook

Gästebuch auf Textbasis (kein MySQL nötig) mit Smilies, Ip Sperre (Zeit selbst einstellbar), Spamschutz, Captcha (Code-Eingabe), BB-Code, Hitcounter, Löschfunktion, Editierfunktion, Kommentarfunktion, Kürzung langer Wörter, Seiten- bzw. Blätterfunktion, V

22.10.2018 webmaster10 | Kategorie: PHP/ Gaestebuch
 Alle PHP Scripte anzeigen

Alle Zeitangaben in WEZ +2. Es ist jetzt 19:51 Uhr.