7.2k Aufrufe
Gefragt in Skripte(PHP,ASP,Perl...) von halfstone Profi (18.1k Punkte)
Hallo liebe JavaScript Profis,

ich brauche für unsere Webseite ein JavaScript mit folgender Funktion:

Eine Webseite hat in einem Formular zwei Texteingabefelder.
Im ersten werden Wörter eingetragen, in jede Zeile eines, Beispiel:

-------------------
Fabian
Hugo
Susi
Markus
-------------------

Wenn ich jetzt im nächsten Texteingabefeld einen Text schreibe, dann soll am besten oben angezeigt werden welche dieser Worte ich schon im Text benutzt habe und wie oft.

------------------
Fabian hat sich heute in die Sonne gelegt und dabei Susi getroffen.
Beide sind dann zusammen Eis essen gegangen und Susi hat dabei noch ihren Hund mitgenommen.
------------------

Dann soll im oberen Textfenster angezeigt werden wie oft die jeweiligen Wörter im unteren Text benutzt wurden also so:

-------------------
Fabian 1
Hugo
Susi 2
Markus
-------------------

Die Aktualisierung würde bei jedem Punkt am Ende eines Satzes reichen, kann aber auch bei jedem Space passieren.

Richtig super wäre auch noch eine zweite Zahl hinter der Anzahl nämlich die Wortdichte die sich aus der Gesamtzahl der Wörter durch die Anzahl der Vorkommen eines Wortes ergibt.

Ich hoffe ich habe mich verständlich ausgedrückt.

Viele Grüße und ein sonniges Wochenende wünsche ich euch

Fabian

38 Antworten

0 Punkte
Beantwortet von halfstone Profi (18.1k Punkte)
So jetzt hab ich den Vorgänger auch gefunden, rfb war damals so freundlich:

Suche JavaScript das Wörter im Text findet und zählt

live zu finden unter Wortdichte

Daraus könnte man ja wenn man das untere Textfeld weglässt und einfach noch die Anzahl der Wörter dazu schreibt die Lösung basteln.

Gruß Fabian
0 Punkte
Beantwortet von halfstone Profi (18.1k Punkte)
So ich hab mich damit noch mal genauer beschäftigt, und das damalige Beispiel von rfb würde schon fast genau das machen was ich suche nur dass man da keine Wortkombinationen eingeben kann.

Es müssten auch Kombinationen gefunden werden, als Beispiel (und so sollte man es auch eingeben können, also jede Zeile eine String):

-------------------
Fabian
Hugo
Susi
Markus
Fabian Gränzer
der gute Ton
-------------------

Jetzt müsste die Wortdichte für alle diese Zeilen gefunden werden (nicht alle Wörter kombiniert sondern jede Zeile extra).

Über Hilfe würde ich mich sehr freuen.

Gruß Fabian
0 Punkte
Beantwortet von
Ich habe mich da jetzt nur kurz mit beschäftigt, aber wenn ich das richtig sehe, hattest du damals als Suchfeld ein input-Feld und als zu durchsuchende Felder zwei Textareas.

Du müsstest also aus dem input-Feld eine Textarea machen und dann in der wortdichten-Funktion die Zeile
var s=t.split(" ");

durch
var s=t.split("\n");

ersetzen.
0 Punkte
Beantwortet von halfstone Profi (18.1k Punkte)
HI Marvin,

hab das mal so probiert, aber dann rechnet er die Wortdichten nicht mehr aus, wie du siehst kenne ich mich überhaupt nicht mit JS aus:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Wortdichte</title>
<script type="text/javascript">
function treffer(suchwort,text) {
var s=suchwort.toUpperCase(),t=text.toUpperCase();
var x=-1,i=-1;
if (s && t && t.length>s.length) do {
x++;
i=t.indexOf(s,i+1);
} while (i>-1 && i<t.length);
return Math.max(x,0);
}
function wortdichte(suchwort,text) {
var t=text.replace(/[\.:,;?!\"\'\n\t\f\r]/g," ");
var tt=t.split(" ");
var tl=tt.length;
for (var j=0;j<tt.length;j++) {
if (tt[j]=="") tl--;
}
var dichte=(tl>0)?treffer(suchwort,t)*100/tl:0;
return dichte;
}
function wortdichten() {
var f=document.getElementById("worte");
var s=f.sw.value.split("\n");
var dichte=new Array(s.length);
var t=f.txt.value;
var liste=document.getElementById("liste");
if (liste) f.removeChild(liste);
liste=document.createElement("ul");
liste.id="liste";
for (var j=0;j<s.length;j++) if (s[j]!="") {
dichte[j]=wortdichte(s[j],t);
var li=document.createElement("li");
li.appendChild(document.createTextNode(s[j]+": "+dichte[j]+"%"));
liste.appendChild(li);
}
f.appendChild(liste);
}
</script>
</head>
<body>
<form id="worte" action="" onsubmit="wortdichten();return false">
<p><label for="sw">Suchwort: <textarea id="sw" name="sw" rows="10" cols="30"></textarea></label></p>
<p><label for="txt">Text: <textarea id="txt" name="txt" rows="10" cols="30"></textarea></label></p>
<p><input type="submit" value="Wortdichte bestimmen"></p>
</form>
</body>
</html>


Gruß Fabian
0 Punkte
Beantwortet von katy Mitglied (787 Punkte)
Hi Fabian,

durch Marvins Vorschlag erhältst du zwar die Zeilen getrennt, aber es bleibt (abhängig vom Betriebssystem) jeweils ein Zeichen LF oder CR übrig.

Ohne mich bislang (aus Zeitmangel, rfbs Code ist nicht leicht nachzuvollziehen) weiter darin vertiefen zu könne würde ich erst einmal folgende Änderung versuchsweise vorschlagen:

mache aus
dichte[j]=wortdichte(s[j],t);

s[j]=s[j].replace(/[\.:,;?!\"\'\n\t\f\r]/g,"");
dichte[j]=wortdichte(s[j],t);

(in diesem regulärem Ausdruck hatte rfb schon mal alle Sonderzeichen erfasst, ist ein bisschen überdimensioniert, aber sollte klappen)

Schönen Sonntag
katy

PS:
sowas wie
var liste=document.getElementById("liste");
führt im IE oft zum Skriptabsturz, verwende nie gleiche IDs und Variablennamen wenn du diesen Browserdino mit berücksichtigen willst.
0 Punkte
Beantwortet von halfstone Profi (18.1k Punkte)
Hi katy,

ja das funktioniert, super!!

Dann gleich eine Frage hinterher, wie könnte man aus den Porzentzahlen, die dann hinter jedem Wort stehen sozusagen eine Ampel machen, die dann je nach Prozentzahl rot, gelb und grün anzeigt.
Man müsste dann natürlich irgendwo angeben welche Prozentzahlen den Farben entsprechen, da würde ich als erstes mal 7-12 Prozent als grün machen, >0 als gelb und alles mit 0 und über 12 Prozent als rot.

Hat dazu jemand einen Vorschlag, so kann man die Sachen schneller erfassen.

Viele Grüße

Fabian

P.S. das funktioniert auch im IE 7 auf Windows XP
0 Punkte
Beantwortet von katy Mitglied (787 Punkte)
Hi Fabian,

auf die schnelle zusammengeschustert:
<style type="text/css">
.rot {
color:red;
}
.gelb {
color:yellow;
}
.gruen {
color:green;
}
</style>

in den head-Bereich.

Und die Schleife
for (var j=0;j<s.length;j++) if (s[j]!="") {
...
liste.appendChild(li);
}

etwas aufblähen zu:

for (var j=0;j<s.length;j++) if (s[j]!="") {
dichte[j]=wortdichte(s[j],t);
var li=document.createElement("li");
li.appendChild(document.createTextNode(s[j]+": "));
var ampel=li.appendChild(document.createElement("span");
ampel.appendChild(document.createTextNode(dichte[j]+"%"));
ampel.className="red";
if (dichte[j]>0 && dichte[j]<7) ampel.className="gelb";
if (dichte[j]>=7 && dichte[j]<=12) ampel.className="gruen";
liste.appendChild(li);
}


katy
0 Punkte
Beantwortet von halfstone Profi (18.1k Punkte)
Hi katy,

ich habs mal so gemacht, aber das funktioniert nicht:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title>Wortdichte</title>
<style type="text/css">
.rot {
color:red;
}
.gelb {
color:yellow;
}
.gruen {
color:green;
}
</style>


<script type="text/javascript">
function treffer(suchwort,text) {
var s=suchwort.toUpperCase(),t=text.toUpperCase();
var x=-1,i=-1;
if (s && t && t.length>s.length) do {
x++;
i=t.indexOf(s,i+1);
} while (i>-1 && i<t.length);
return Math.max(x,0);
}
function wortdichte(suchwort,text) {
var t=text.replace(/[\.:,;?!\"\'\n\t\f\r]/g," ");
var tt=t.split(" ");
var tl=tt.length;
for (var j=0;j<tt.length;j++) {
if (tt[j]=="") tl--;
}
var dichte=(tl>0)?treffer(suchwort,t)*100/tl:0;
return dichte;
}
function wortdichten() {
var f=document.getElementById("worte");
var s=f.sw.value.split("\n");
var dichte=new Array(s.length);
var t=f.txt.value;
var liste=document.getElementById("liste");
if (liste) f.removeChild(liste);
liste=document.createElement("ul");
liste.id="liste";

for (var j=0;j<s.length;j++) if (s[j]!="") {
dichte[j]=wortdichte(s[j],t);
var li=document.createElement("li");
li.appendChild(document.createTextNode(s[j]+": "));
var ampel=li.appendChild(document.createElement("span");
ampel.appendChild(document.createTextNode(dichte[j]+"%"));
ampel.className="red";
if (dichte[j]>0 && dichte[j]<7) ampel.className="gelb";
if (dichte[j]>=7 && dichte[j]<=12) ampel.className="gruen";
liste.appendChild(li);
}
</script>
</head>
<body>
<form id="worte" action="" onsubmit="wortdichten();return false">
<p><label for="sw">Suchwort: <textarea id="sw" name="sw" rows="10" cols="30"></textarea></label></p>
<p><label for="txt">Text: <textarea id="txt" name="txt" rows="10" cols="30"></textarea></label></p>
<p><input type="submit" value="Wortdichte bestimmen"></p>
</form>
</body>
</html>


Die Textfelder werden nur gelöscht und nichts wird angezeigt

Gruß und Danke schon mal für deine Hilfe

Fabian
0 Punkte
Beantwortet von supermax Experte (4.8k Punkte)
Ich hab mal schnell was gebastelt, du kannst es dir hier ansehen.
0 Punkte
Beantwortet von katy Mitglied (787 Punkte)
Hi Fabian,

du hast beim Einfügen 2 zeilen zuviel überschrieben.

mehr dazu evtl. später

tschüß

katy
...