nicht angemeldet
In vorhandenen Textknoten einen Link einfügen (DOM)
0 1 0 
Gunnar Bittersmann
0 0 0
In vorhandenen Textknoten einen Link einfügen (DOM)
Hallo zusammen,
kann mir jemand helfen / ein Beispiel posten,
wie man in einen vorhandenen Textknoten einen
Link-Knoten (A HREF) mittels DOM einfügen kann?
Also aus:
Dies ist ein kleiner Text.
soll dann:
Dies ist <a href="#>kleiner</a> Text.
werden.
Vielen Dank im Voraus.
Gruß
juppinger
-
Hi,
Dies ist <a href="#>kleiner</a> Text.
das ist _kein_ Text sondern ein a Element, das Du mit createElement erzeugst. Diesem fuegst Du einen Textknoten zu, den Du mit createTextNode erzeugst. Beim Einfuegen in den DOM-Baum hast Du die Wahl zwischen appendChild, insertBefore etc: http://de.selfhtml.org/javascript/objekte/node.htm#
Gruesse, Joachim
--
Am Ende wird alles gut. -
Hi,
ich vermute(!), dass du das in Handarbeit machen musst, d.h.
- die 3 Teilbereiche vor, in und hinter dem Link identifizieren
- Den Textknoten so anpassen, dass er nur noch den Text vor dem Link enthält.
- Einen neues <a>-Element mit den gewünschten Eigenschaften und dem Text erzeugen und als neues Kind an das Elternelement des Textknotens anhängen
- Einen neuen Textknoten erzeugen mit der "nach"-Beschriftung und als neues Kind an das Elternelement des Textknotens anhängen.
MfG
Rouven--
-------------------
Computer programming is tremendous fun. Like music, it is a skill that derives from an unknown blend of innate talent and constant practice. Like drawing, it can be shaped to a variety of ends: commercial, artistic, and pure entertainment. Programmers have a well-deserved reputation for working long hours but are rarely credited with being driven by creative fevers. Programmers talk about software development on weekends, vacations, and over meals not because they lack imagination, but because their imagination reveals worlds that others cannot see. -- Larry OBrien and Bruce Eckel in Thinking in C#-
Okay, soweit, sogut.
Aber es hat ja z. B. auch ein Link einen Textknoten.
Oder ein Button usw. usw.Wie kann ich denn NUR die wirklichen Textknoten herausfinden... denn ich moechte nicht einen schon vorhandenen Link durch einen neuen ersetzen... oder wenn der zu erseztende Text in einem Button steht, soll er auch nicht ersetzt werden.
Gruss
juppinger-
Hi,
Wie kann ich denn NUR die wirklichen Textknoten herausfinden...
Ein "wirklicher" Textknoten hat keinen Link-Knoten als Eltern-(oder sonstiges Vorfahren-)element.
Und das weißt Du ja, wenn Du dich durch den DOM-Baum hangelst ...
Gruß, Cybaer
--
Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!-
Hallo nochmal,
danke für Deine Hilfe.
Ich bin jetzt soweit -wie Du es geschrieben hast-...:
- Quell-Textknoten kürzen bis zur Link-Stelle
Jetzt habe ich jedoch das Problem, dass der anzuhängende Link nicht erscheint und eine JS-Fehlermeldung kommt ("Unerwarteter Aufruf oder Zugriff").
Hier ist mein Code:
----------------------------------------<html>
<head>
</head>
<body><h1>Die Abwehr und Pirlo beschäftigen</h1>
Diese Bitte konnte Urs Siegenthaler Jogi Löw beim besten Willen nicht erfüllen. Dabei wollte der Assistent von Bundestrainer Klinsmann dem DFB-Chef-Analytiker nur einen einzigen Schwachpunkt im italienischen Team entlocken. "Es klingt hart", sagte Siegenthaler, "aber Italien hat wirklich eine komplette Elf, die kaum Fehler macht." Da stellt sich natürlich die Frage, wie man das Halbfinale gegen Italien (ab 20.45 Uhr im onSport Live-Ticker) überhaupt erfolgreich gestalten kann. Auch die T-Online Analyse bringt zum Vorschein, dass auf die deutsche Mannschaft ein extrem dicker Brocken wartet, der aber aber durchaus zu knacken ist.
<br><br>
<button onclick="scantext();">Click Me</button><script language="JavaScript">
<!--
function scantext() {n = document.getElementsByTagName("body")[0];
keyword = "Team";walk_dom(n,keyword);
function walk_dom(n,keyword) {
/*
1 Elementknoten
2 Attributknoten
3 Textknoten
4 Knoten für CDATA-Bereich
5 Knoten für Entity-Referenz
6 Knoten für Entity
7 Knoten für Verarbeitungsanweisung
8 Knoten für Kommentar
9 Dokument-Knoten
10 Dokumenttyp-Knoten
11 Dokumentfragment-Knoten
12 Knoten für Notation
*/if (n.nodeType == 3 /*Node.TEXT_NODE*/)
{
var pos = n.data.search(keyword);
//var pnt = n.parentNode.tagName;
//if (pos > -1 && pnt != "A" && pnt != "IMG") {
if (pos > -1) {
txtreplace(n,keyword,pos);
}
}
else
{
var kids = n.childNodes;for(var i = 0; i < kids.length; i++)
{
walk_dom(kids[i],keyword);
}
}
}function txtreplace(n,keyword,pos) {
var endtext = n.cloneNode(true); // Textknoten kopieren (fuer Endtext nach HREF)
n.data = n.data.substr(0,pos); // Aktuellen (Ersten) Knoten kürzen bis vor das Keyword
endtext.data = endtext.data.substr( (pos + keyword.length) , endtext.data.length); // Endtextknoten kürzen ab dem Keyword bis Ende// Link-Knoten erzeugen
var objLink = document.createElement("a");
objLink.setAttribute("href", "http://www.google.de");
objLink.appendChild(document.createTextNode(keyword));n.appendChild(objLink);
//n.appendChild(endtext);
}}
//-->
</script></body>
</html>-----------------------------------------------
Bitte hilf mir doch nochmal :)
Danke + Gruß
juppinger
-
-
-
Hello out there!
soll dann:
Dies ist <a href="#>kleiner</a> Text.
werden.Das wäre aber ungünstig, weil kein valides HTML. ;-)
Und wie willst du angeben, welcher Textabschnitt verlinkt werden soll?
See ya up the road,
Gunnar--
“Remember, in the end, nobody wins unless everybody wins.” (Bruce Springsteen) -
Hallo Juppinger.
kann mir jemand helfen / ein Beispiel posten,
wie man in einen vorhandenen Textknoten einen
Link-Knoten (A HREF) mittels DOM einfügen kann?Hole dir den <http://de.selfhtml.org/javascript/objekte/node.htm#node_value@title=Inhalt des Textknotens> und trenne ihn mittels http://de.selfhtml.org/javascript/objekte/string.htm#substr@title=substr(http://de.selfhtml.org/javascript/objekte/string.htm#substring@title=ing) und http://de.selfhtml.org/javascript/objekte/string.htm#index_of@title=indexOf in drei Teile auf.
Aus dem ersten Teil <http://de.selfhtml.org/javascript/objekte/document.htm#create_text_node@title=erzeugst du nun einen Textknoten>, aus dem zweiten Teil den http://de.selfhtml.org/javascript/objekte/document.htm#create_element@title=Link und aus dem dritten Teil wiederum einen Textknoten.
Nun http://de.selfhtml.org/javascript/objekte/node.htm#remove_child@title=entfernst du den ursprünglichen Textknoten und http://de.selfhtml.org/javascript/objekte/node.htm#append_child@title=hängst die drei neuen Knoten an seiner Stelle in das jeweilige Element ein.
Einen schönen Montag noch.
Gruß, Ashura
--
sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
„It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
[HTML Design Constraints: Logical Markup]-
Hi,
Man einen Textknoten auch direkt aufteilen -> splitText()
Gruß, Cybaer
--
Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!-
Hallo Cybaer.
Man einen Textknoten auch direkt aufteilen -> splitText()
Diese Methode ist mir nicht bekannt. Wo ist sie spezifiziert?
Einen schönen Montag noch.
Gruß, Ashura
--
sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
„It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
[HTML Design Constraints: Logical Markup]-
Hi,
Diese Methode ist mir nicht bekannt.
Jetzt schon. ;-)
Wo ist sie spezifiziert?
In Goodmans "JavaScript Bible". ;)
Offiziell im DOM Level 2 Core.
Gruß, Cybaer
--
Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!-
Hallo Cybaer.
Diese Methode ist mir nicht bekannt.
Jetzt schon. ;-)
Ja, in der Tat, danke.
Wo ist sie spezifiziert?
In Goodmans "JavaScript Bible". ;)
Offiziell im DOM Level 2 Core.
Ah, etwas oberflächlich gesucht. Tatsächlich gibt es diese Methode aber auch schon seit DOM Level 1.
Einen schönen Montag noch.
Gruß, Ashura
--
sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
„It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
[HTML Design Constraints: Logical Markup]
-
-
-
Hi,
Man einen Textknoten auch direkt aufteilen -> splitText()
ggf auch substringData(Anfang, Länge)
Gruesse, Joachim
--
Am Ende wird alles gut. -
hi,
Man einen Textknoten auch direkt aufteilen -> splitText()
Hast du Informationen zur Browserkompabilität zur Hand (bzw. schon mal damit gearbeitet, und Erfahrungswerte)?
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Hi,
Hast du Informationen zur Browserkompabilität zur Hand (bzw. schon mal damit gearbeitet, und Erfahrungswerte)?
Wie bei createElement() - wobei die diesbezügl. Angabe bei SELFHTML wohl nicht stimmt. AFAIK beherrscht nicht erst der IE 5.5 createElement(), sondern ab IE 5 - eingeschränkt sogar schon ab IE 4.
Also auf deutsch: Alle "DOM-Browser" unterstützen das.
Gruß, Cybaer
--
Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!-
Hi,
Wie bei createElement() - wobei die diesbezügl. Angabe bei SELFHTML wohl nicht stimmt. AFAIK beherrscht nicht erst der IE 5.5 createElement(), sondern ab IE 5 - eingeschränkt sogar schon ab IE 4.
Um Mißverständnissen vorzubeugen: splitText() existiert ab IE 5. ;-)
Gruß, Cybaer
--
Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!-
hi,
Um Mißverständnissen vorzubeugen: splitText() existiert ab IE 5. ;-)
Danke, werde ich mich mal mit beschäftigen - ggf. kann ich damit ein aktuelles Vorhaben, in einem bestimmten Bereich jedes Text-Zeichen mit einem Span zu umkleiden, vereinfachen.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }-
Hallo wahsaga.
Danke, werde ich mich mal mit beschäftigen - ggf. kann ich damit ein aktuelles Vorhaben, in einem bestimmten Bereich jedes Text-Zeichen mit einem Span zu umkleiden, vereinfachen.
Das kommt mir doch bekannt vor …
Die explizite Ausrichtung auf zwei resultiernde Textknoten lässt splitText() aber in meinen Augen ein wenig unpraktisch erscheinen.
Einen schönen Montag noch.
Gruß, Ashura
--
sh:( fo:} ch:? rl:( br: n4:~ ie:{ mo:| va:) de:> zu:} fl:( ss:) ls:[ js:|
„It is required that HTML be a common language between all platforms. This implies no device-specific markup, or anything which requires control over fonts or colors, for example. This is in keeping with the SGML ideal.“
[HTML Design Constraints: Logical Markup]-
hi,
[...] aktuelles Vorhaben, in einem bestimmten Bereich jedes Text-Zeichen mit einem Span zu umkleiden, vereinfachen.
Das kommt mir doch bekannt vor …
Nun, in meinem Falle ist es etwas komplizierter - es handelt sich nicht um _einen_ Textknoten, sondern um einen Bereich, der aus Textknoten und anderen Knoten, die dann wiederum Textknoten enthalten können, besteht.
Beispiel: Aus
<h1>blah <b>blubb</b></h1>
möchte ich
<h1><span>b</span><span>l</span><span>a</span><span>h</span><span> </span><b><span>b</span><span>l</span><span>u</span><span>b</span><span>b</span></b></h1>
machen.Die Elementknoten in der Überschrift, die selbst keine Textknoten sind, sollen also erhalten bleiben - und ihr Inhalt dann ebenfalls wieder "aufgeteilt" werden.
Habe dazu zwar schon eine nicht allzu komplizierte Lösung mittels Rekursion gebastelt, aber vielleicht lässt sich splitText da auch irgendwie verwenden - damit müsste ich z.B. die Textknoten mit den Einzelzeichen, die dann in die Spans kommen, nicht jedesmal extra erzeugen.
Die explizite Ausrichtung auf zwei resultiernde Textknoten lässt splitText() aber in meinen Augen ein wenig unpraktisch erscheinen.
Erstes "Zeichen" als neuen Textknoten absplitten und in einen Span packen, und mit nächstem "Zeichen" weitermachen ... so ähnlich.
gruß,
wahsaga--
/voodoo.css:
#GeorgeWBush { position:absolute; bottom:-6ft; }
-
-
-
-
-
-
-
-
Hi,
kann mir jemand helfen / ein Beispiel posten,
wie man in einen vorhandenen Textknoten einen
Link-Knoten (A HREF) mittels DOM einfügen kann?Damit das nicht in DOMme Arbeit ausartet, haben alle "DOM-Browser" innerHTML implementiert:
document.getElementById("idMeinesTextes").innerHTML=document.getElementById("idMeinesTextes").innerHTML.replace('kleiner','<a href="#">kleiner</a>');
Gruß, Cybaer
--
Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"! -
Hallo zusammen,
vielen Dank erstmal für alle, die mir geschrieben haben.
Aus diesen Antworten bin ich jetzt viel weiter gekommen und bin quasi *fast* fertig.Ich möchte mit DOM bestimmte Wörter (aus einem Array) in Texten einer Webseite nachträglich mit einem Link versehen.
Das funktioniert soweit auch ganz gut - aber leider nur das 1. Wort wird ersetzt. Dananch kommt ein JS-Fehler "Ungültiges Argument".
Ich habe den kompletten Code unten angehängt und wäre suuuper dankbar, wenn Ihr mir helfen könntet. Bin am verzweifeln :-[
Gruss + 1000 Dank
Juppinger-------------------------------------------------------------
Mein Code:
-------------------------------------------------------------
<html>
<head>
</head>
<body><h1>Die Grundidee ...</h1>
... beim CrossGolf (geschrieben auch: X-Golf) ist es, alles das, was den normalen Golfsport ziemlich uninteressant macht wegzulassen: blasierte Etikette, spiessige Kleiderordnungen, kleinliches Regelwerk, hohe Mitlgliedsbeiträge und elitäres Clubhaus-Gehabe. Statt dessen geht man einfach locker „ein paar Bälle verschicken“.
Ausgerüstet mit Secondhand-Schläger und -Bällen, werden dann spontan - je nach Gelände - ein paar einfache (oder je nach Stimmungspegel auch völlig schwachsinnige) Regeln klargemacht und los gehts.
Meist reagieren die Leute zwar aufgeschlossen aber etwas skeptisch auf solche Erklärungen. Aber wer einmal (wenigstens halbwegs) den Ball, mit sattem Geräusch und hohem Bogen, getroffen hat, kommt davon nicht mehr los! Irgendwie scheint das süchtig zu machen!?
<br><br>
<button onclick="scantext();">Links einfügen</button><script>
var ArrKeywords = new Array ("X-Golf","Gelände");
</script><script language="JavaScript">
<!--
function scantext() {for(x=0;x<ArrKeywords.length;x++) {
var n = document.getElementsByTagName("body")[0];
var ersetzt=0;
alert('Ersetze: '+ArrKeywords[x]);
walk_dom(n,ArrKeywords[x]);
}function walk_dom(n,keyword) {
/*
1 Elementknoten
2 Attributknoten
3 Textknoten
4 Knoten für CDATA-Bereich
5 Knoten für Entity-Referenz
6 Knoten für Entity
7 Knoten für Verarbeitungsanweisung
8 Knoten für Kommentar
9 Dokument-Knoten
10 Dokumenttyp-Knoten
11 Dokumentfragment-Knoten
12 Knoten für Notation
*/if (n.nodeType == 3 /*Node.TEXT_NODE*/)
{
var pos = n.data.search(keyword);
var pnt = n.parentNode.tagName;
if (ersetzt==0 && pos > -1 && pnt != "A" && pnt != "IMG") {
txtreplace(n,keyword,pos);
}
}
else
{
var kids = n.childNodes;for(var i = 0; i < kids.length; i++)
{
walk_dom(kids[i],keyword);
}
}
}function txtreplace(n,keyword,pos) {
//alert(n.data);
var objNeuKnoten = document.createElement("span");
// Vor-Text-Knoten erzeugen
var objTextVor = document.createTextNode(n.data.substr(0,pos));
// Nach-Text-Knoten erzeugen
var objTextNach = document.createTextNode(n.data.substr((pos + keyword.length) , n.data.length));
// Link-Knoten erzeugen
var objLink = document.createElement("a");
objLink.setAttribute("href", "http://www.xgolf.net");
objLink.appendChild(document.createTextNode(keyword));
// Alle Knoten zusammenfuehren
objNeuKnoten.appendChild(objTextVor);
objNeuKnoten.appendChild(objLink);
objNeuKnoten.appendChild(objTextNach);document.body.replaceChild(objNeuKnoten, n);
//document.body.appendChild(objNeuKnoten); <<<--- DAS KLAPPT EINWANDFREIersetzt=1;
}}
//-->
</script></body>
</html>
--------------------------------------------------------------
Hi,
Ich möchte mit DOM bestimmte Wörter (aus einem Array) in Texten einer Webseite nachträglich mit einem Link versehen.
Such mal nach "splitText Bookmarklet" (auch hier im Forumsarchiv) es gibt ein Bookmarklet, daß einzelne Wörter im Text markiert, nach denen (via Google) gesucht wurde. Der Quelltext dürfte hilfreich sein. ;-)
Gruß, Cy-"erst morgen wieder hier"-baer
--
Hinweis an Fragesteller: Fremde haben ihre Freizeit geopfert, um Dir zu helfen. Helfe Du auch im Archiv Suchenden: Beende deinen Thread mit einem "Hat geholfen" oder "Hat nicht geholfen"!-
Hi,
habe ich mir angeschaut.
Ich wüsste nicht, wie dies mir weiterhelfen sollte.
Kannst Du Dir evtl. mal mein Script anschauen?Gruß
juppinger
-
-