Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript] wysukiwanie i kolorowanie słowa
Forum PHP.pl > Forum > Gotowe rozwiązania > Szukam
mateuszpi
1.07.2008, 10:34:28
Witam
mam kilka stron z spora ilością tekstu.
chciałbym prosić o gotowca bo o js nie mam pojęcia aby sam pisać, aby był taki bajerek:
na stronie kilka razy występuje słowo wp. chciałbym aby było ono kolorowane. tekst tej strony jest wyświetlany z bazy SQL i pod jednym wygladem pojawia się inny tekst ale zawsze słowo wp ma byc kolorowane, ma być linkiem oczywiście do www.wp.pl.

Chciałbym aby skrypt był możliwy do rozbudowy dla innych kombinacji słów-> linków,kolor

Może gdzies taki gotowiec istnieje to dajcie namiary bo nie wiem nawet zbytnio jak zabrać się za szukanie tego.

Pozdrawiam
Mateusz
batman
1.07.2008, 10:47:43
Przenoszę na szukam.
Shili
1.07.2008, 11:17:02
Nie wiem co prawda gdzie czegoś takiego szukać, ale ze swojej strony mogę zaproponować rozwiązanie w tym stylu:
[HTML] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <script type="text/javascript">
  4.     function szukajTekstu()
  5.     {
  6.         tekst = /(\s)(sit)([\s\.,;:])/gi; // tekst szukany jest w drugim nawiasie , wyszukiwane są tylko pełne słowa
  7.         element = document.getElementById('tekst').innerHTML; // element w którym szukane jest słowo
  8.         link = '<a href="wp.pl" class="podmieniony_tekst1">'; // tu można zmieniać klasę linku, adres
  9.         document.getElementById('tekst').innerHTML = element.replace(tekst, '$1'+link+'$2</a>$3');
  10.  
  11.         // Jeśli chce się więcej niż jedną frazę wyszukać i pokolorować:
  12.         tekst = /(\s)(pede est)([\s\.,;:])/gi;
  13.         link = '<a href="wp.pl" style="color: purple;">' // można też kolor opisać bezpośrednio w linku, ale rozwiązanie z klasą jest lepsze
  14.         element = document.getElementById('tekst').innerHTML;
  15.         document.getElementById('tekst').innerHTML = element.replace(tekst, '$1'+link+'$2</a>$3');
  16.     }
  17. </script>
  18. <style>
  19.     /* w stylach spokojnie można zmieniać kolory, wielkości czczionek i wszystkie różne dziwne wizualne rzeczy */
  20.     .podmieniony_tekst {color: red;}
  21.     .podmieniony_tekst2 {color: purple;}
  22. </style>
  23. </head>
  24. <body onload="szukajTekstu();">
  25. <div id="tekst">
  26. Lorem ipsum dolor sit: amet, consectetuer adipiscing elit. Nam turpis. Suspendisse vel purus. Phasellus imperdiet est; Quisque lacus. Curabitur pulvinar euismod felis. Curabitur sed erat. Curabitur blandit. Donec dictum nunc non tellus. Aenean at tellus sit amet neque dapibus cursus. Suspendisse id est.
  27. <br/><br/>
  28. Vivamus mi nisl, luctus non, condimentum non, adipiscing sit amet, urna. Suspendisse porttitor, mauris ac porta facilisis, urna sapien vestibulum diam, non venenatis nisi diam et eros. Vestibulum purus erat, adipiscing vel, pulvinar ac, mattis ut, sapien. Morbi a purus ut ante dictum bibendum. Curabitur turpis lectus, tincidunt eget, hendrerit et, sagittis quis, leo. Nam interdum. Duis accumsan porttitor ligula. Aenean ut augue eget nunc tincidunt sagittis. Mauris placerat felis ut erat. Nunc pede. In gravida lorem in diam sodales mollis. Nunc auctor massa ut velit.
  29. <br/><br/>
  30. Mauris eros. Suspendisse eu justo. Pellentesque sodales ligula in ipsum. In hac habitasse platea dictumst. Vestibulum dolor metus, lacinia eu, sollicitudin in, mattis ac, orci. Maecenas scelerisque elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Suspendisse id odio. Pellentesque accumsan. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum dignissim lorem ac orci. Donec congue. Etiam vel nisi.
  31. <br/><br/>
  32. Vivamus id justo. Aliquam pretium placerat ligula. Vivamus a ipsum in purus ultricies venenatis. Phasellus consectetuer ullamcorper urna. Aliquam tempus nisi. Vivamus eu eros ut nulla egestas elementum. Fusce ut dolor nec nisl feugiat lacinia. Curabitur id velit. Fusce eleifend, purus in ultrices porttitor, risus nisl varius metus, non vulputate pede est nec nisl. Fusce rutrum, leo vitae suscipit ornare, sapien libero pretium lorem, ullamcorper molestie nunc eros ac turpis. Phasellus gravida placerat nulla. Quisque fringilla pede. Sed vitae nisl. Etiam eu risus. Cras elit magna, fermentum vel, sagittis quis, ultrices non, ante. Vivamus arcu. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed aliquet adipiscing nibh. Praesent interdum mattis sapien. Sed sed sapien.
  33. <br/><br/>
  34. Pellentesque vel quam. Aliquam accumsan sapien congue sapien. Praesent egestas massa condimentum tellus. Nullam venenatis bibendum sem. Nam aliquet pretium mauris. Vivamus nec odio eget urna iaculis lobortis. Maecenas aliquet, leo et pulvinar eleifend, sem justo ultrices elit, ac viverra arcu dui sit amet dui. Praesent arcu dui, dapibus sed, rutrum id, luctus vitae, nisl. Nam et nibh facilisis mauris lacinia euismod. Duis ullamcorper, elit ut condimentum bibendum, augue lectus ultrices mauris, at accumsan eros turpis id elit. Aenean suscipit condimentum sapien. Vestibulum risus sapien, interdum eu, ultricies a, rutrum ac, enim. In dapibus lorem at magna. Morbi eleifend. 
  35. </div>
  36. </body>
  37. </html>
[HTML] pobierz, plaintext


Swoją drogą myślę, że lepiej byłoby to zrobić na poziomie wyświetlania z bazy przez php. Wtedy przynajmniej każdy niezależnie od ustawień przeglądarki zobaczy te linki.
mateuszpi
1.07.2008, 14:07:55
dzięki za pomoc. jestem w pracy to nie moge sprawdzić jak to zadziała na pełnej stronie z php ale tak na szybko w czystym html działe perfekcyjnie. napewno będzie zastosowana klasa.

co do podpięcia tego zamieniania pod php to teraz tak własnie działa. chciałbym jednak sprawdzic co jest szybsze i mniej obciążające całosć stronki.

Dzięki jeszcze raz.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.
Invision Power Board © 2001-2024 Invision Power Services, Inc.