javascript - Tekst styler funktion fejl. - Udvikleren.dk

Tags: javascript

<< < 1 2 > >>

Bruger #11328 @ 22.02.08 17:01

Hej alle udviklere!

Jeg er begyndt at kaste mig over javascript og har lavet en tekst styler der gennemløber en div.
Problemet er at den kun virker med første $variabel.

kode:

Kode

 function styletxt()
 {
   var textBox = document.getElementById('teksteditor');
   editortxt = textBox.innerHTML;

    find_vars = editortxt.indexOf('$');
    close_vars = editortxt.indexOf(' ',find_vars);
    if(close_vars != -1)
    {
    the_var = editortxt.substring(find_vars,close_vars);
    the_var = "<span style='color: #91CC12; font-weight: bold;'> " + the_var + "</span>";
    editortxt = editortxt.substring(0,find_vars) + the_var + editortxt.slice(close_vars);
    textBox.innerHTML = editortxt;
    }

 }

Som i måske kan læse jer til i koden eller bare kan visualisere laver den kun den første $-sætning grøn.

1) Hvad skal jeg gøre for at den gennemløber alle sådanne sætninger?

2) Er der en anden måde (bare for at blive klogere...)

3) Hvad ville i f.eks. gerne have hightlitet? Har allerede tænkt på strenge ("") tal og funktioner, men hvad med noget andet?

4) Har tænkt lidt over det og kommet frem til at XML måske kunne bruges. Hvad synes i?

ved godt det blev en lang post, men håber virkelig i vil hjælpe!
~Jakob

17 svar postet i denne tråd vises herunder
2 indlæg har modtaget i alt 4 karma

Sorter efter stemmer Sorter efter dato

Bruger #8773 @ 23.02.08 12:54

658

Jeg har prøvet at lege lidt med det, og jeg fik dette eksempel til at virke:

Kode

<script type="text/javascript">

var str="Besøg $beta-designs! $beta-designs er et lille firma, som sælger $webdesigns";
styler = str.replace(/([$][A-Za-z]+)/g,"<span style='color: #91CC12; font-weight: bold;'>$1</span>");
styler = styler.replace(/\\$/g,"");
document.write(styler);
</script>

Den vil udskrive alle sætninger med "$" foran i grøn samtidigt med at den fjerner det lille "$" foran sætningen..

Håber du kan bruge det til noget

Bruger #11596 @ 23.02.08 15:20

Desværre, den laver også alt tekst efter $variabelnavn grøn...
(og min backspace funktion virker ikke)
Kode
if (charCode == 8)  //  Backspace
   {
   length = editortxt.length - 1;
   editortxt = editortxt.substring(0, length);
    textBox.innerHTML = editortxt;
   }
Er der en anden og bedre måde? denne her virker nemlig heller ikke så snart man har lavet et <br /> i teksten...

Har lige testet min function og kan ikke se fejlen...
Din backspace skal være noget ala:

Kode

if (charCode == 8)  //  Backspace
{
editortxt = editortxt.replace(/<br />/,"\\n");
   length = editortxt.length - 1;
   editortxt = editortxt.substring(0, length);
    textBox.innerHTML = editortxt.replace(/(\\n)/,"<br />");;
   }

Indlæg senest redigeret d. 23.02.2008 15:22 af Bruger #11596

Bruger #11596 @ 22.02.08 17:30

Her er en functionen rettet:

Kode

 function styletxt()
 {
   var textBox = document.getElementById('teksteditor');
   editortxt = textBox.innerHTML;

find_vars = editortxt.indexOf('$');
    close_vars = editortxt.indexOf(' ',find_vars);
    while(close_vars != -1&&find_vars != -1);
    {
    the_var = editortxt.substring(find_vars,close_vars);
    the_var = "<span style='color: #91CC12; font-weight: bold;'> " + the_var + "</span>";
text = editortxt.substring(close_vars);
    editortxt = editortxt.substring(0,find_vars) + the_var + editortxt.slice(close_vars);
    textBox.innerHTML = editortxt;
find_vars = text.indexOf('$');
    close_vars = text.indexOf(' ',find_vars);
    }

 }

En nemmere måde:

Kode

function styletxt()
{
	var textBox = document.getElementById('teksteditor');
	editortxt = textBox.innerHTML;
	editortxt = editortxt.replace(/([$][A-Za-z]+)/g,"<span style='color: #91CC12; font-weight: bold;'>$1</span>");
	textBox.innerHTML = editortxt;
}

Indlæg senest redigeret d. 22.02.2008 18:38 af Bruger #11596

Bruger #11328 @ 22.02.08 19:59

1.323

Her er en functionen rettet:

Kode

 function styletxt()
 {
   var textBox = document.getElementById('teksteditor');
   editortxt = textBox.innerHTML;

find_vars = editortxt.indexOf('$');
    close_vars = editortxt.indexOf(' ',find_vars);
    while(close_vars != -1&&find_vars != -1);
    {
    the_var = editortxt.substring(find_vars,close_vars);
    the_var = "<span style='color: #91CC12; font-weight: bold;'> " + the_var + "</span>";
text = editortxt.substring(close_vars);
    editortxt = editortxt.substring(0,find_vars) + the_var + editortxt.slice(close_vars);
    textBox.innerHTML = editortxt;
find_vars = text.indexOf('$');
    close_vars = text.indexOf(' ',find_vars);
    }

 }

En nemmere måde:

Kode

function styletxt()
{
	var textBox = document.getElementById('teksteditor');
	editortxt = textBox.innerHTML;
	editortxt = editortxt.replace(/([$][A-Za-z]+)/g,"<span style='color: #91CC12; font-weight: bold;'>$1</span>");
	textBox.innerHTML = editortxt;
}

Super! Vidste ikke at man kunne bure preg.

Bruger #11328 @ 22.02.08 20:01

1.323

Ked af det, men ingen af dem virker!
Din smarte med preg_match giver kun det første bogstav farve.
(læg mærke til at det der skal farves bliver indtastet)

Og den anden går helt amok selv om man ikke skrive et enste $

Bruger #11596 @ 23.02.08 11:43

Jeg forstår ikke helt fejlen ved min preg_match den farve da ikke kun det første bogstav???

Bruger #11328 @ 23.02.08 14:29

1.323

Nørd:
Som sagt taster jeg noget ind fra tastaturet, dvs. at bodyen starter en funktion på onkeypress, den funktion starter så starter styletext().
Din funktion ville virke hvis man brugte den på en allerede færdig tekst, men det er min ikke, den bliver skrevet som et input.

Simon:
hehe tror du misforstod det, meningen er nemlig ikke at gøre enkelte ord grønne men at gøre variabler grønne, $-tegnet skal ikke udskiftes med ingenting...
Din funktion gør iøvrigt det samme, den ville kun kunne virke på en færdig tekst, som din string, men skal løbende opdateres!

Bruger #8773 @ 23.02.08 14:35

658

Hvad er det så du vil have? Hvilke former for variabler er det du vil have farvet? Prøv at gi' mig et eksempel på en sætning, som du sidder og skriver direkte, der skal ændres, så kigger jeg på det

Bruger #11328 @ 23.02.08 14:38

1.323

Jeg skriver:
$var = 12;

Så snart jeg har skrevet '$var ' (altså med mellemrum) Så bliver det grønt (eller en anden farve for den sags skyld...)

Bruger #11596 @ 23.02.08 14:39

Her er ikke testet men burde virke

Kode

function styletxt()
{
	var textBox = document.getElementById('teksteditor');
	editortxt = textBox.innerHTML;
	editortxt = editortxt.replace(/<span style='color: #[1-9a-f]{6}; font-weight: bold;'>|<\\/span>/gi,"");
	editortxt = editortxt.replace(/([$][A-Za-z]+)/g,"<span style='color: #91CC12; font-weight: bold;'>$1</span>");
	textBox.innerHTML = editortxt;
}

Indlæg senest redigeret d. 23.02.2008 14:44 af Bruger #11596

<< < 1 2 > >>

Tekst styler funktion fejl.

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler