![]() |
![]() |
![]() ![]()
Post
#1
|
|
Grupa: Zarejestrowani Postów: 196 Pomógł: 0 Dołączył: 9.03.2017 Ostrzeżenie: (0%) ![]() ![]() |
Mam taki przykład zaczerpnięty stąd: https://stackoverflow.com/questions/4523215...sing-javascript
Kod var toLookInto = $("#toLookInto").html(); $("#toFind").on("keyup", function() { var toFind = $("#toFind").val(); var regx = new RegExp(toFind, "g"); var newstring = toLookInto.replace(regx, '<span class="highlight">' + toFind + '</span>') $("#toLookInto").html(newstring) }); Kod .highlight { color: red; } Kod <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script> <p id="toLookInto"> dummy text foo bar cat mewo dummy text foo bar cat mewo dummy text foo something odd bar cat mewo dummy text foo bar cat mewo </p> <br> <input type "text" id="toFind" /> <lable>The text field will be triggered on every key pressed</label> Przepisałem go: https://codepen.io/reti/pen/gOPdBvM Kod let toLookInto = document.getElementById("toLookInto").innerHTML; toFind.addEventListener("keyup", () => { let toFind = document.getElementById("toFind").value; let regx = new RegExp(toFind, "g"); let newstring = toLookInto.replace( regx, '<span class="highlight">' + toFind + "</span>" ); document.getElementById("toLookInto").innerHTML = newstring; }); Kod .highlight { color: red; } Kod <p id="toLookInto"> dummy text foo bar cat mewo dummy text foo bar cat mewo dummy text foo something odd bar cat mewo dummy text foo bar cat mewo </p> <br> <input type="text" id="toFind" /> <lable>The text field will be triggered on every key pressed</label> Da się to jeszcze jakoś uprościć? To się powtarza: Kod document.getElementById("toLookInto").innerHTML
Ten post edytował stellatus 15.07.2020, 12:31:06 |
|
|
![]() |
![]()
Post
#2
|
|
![]() Grupa: Zarejestrowani Postów: 1 707 Pomógł: 266 Dołączył: 3.07.2012 Skąd: Poznań Ostrzeżenie: (0%) ![]() ![]() |
Czasem powtórzenia nie da się uniknąć. Tak jest na przykład właśnie z odczytywaniem i zapisywaniem wartości - musisz wielokrotnie powtórzyć nazwę właściwości. Ale za to sam element mógłby sobie siedzieć w zmiennej - to powtórzenie akurat jest do naprawy.
$("#toFind").val() można zamienić na $(this).val(). I ostatnia rada - w 99% przypadków lepiej jest używać zdarzenia input zamiast keyup. Nie każdy wie o istnieniu zdarzenia input, dlatego dość często nadal można spotkać kod wykorzystujący keyup. A szkoda, bo keyup jest wywoływany nieznośnie późno. |
|
|
![]()
Post
#3
|
|
Grupa: Zarejestrowani Postów: 6 767 Pomógł: 1824 Dołączył: 11.03.2014 Ostrzeżenie: (0%) ![]() ![]() |
$("#toFind").val() można zamienić na $(this).val(). Autor przepisał jQuery na czysty JS. -------------------- |
|
|
![]() ![]() |
![]() |
Wersja Lo-Fi | Aktualny czas: 18.06.2024 - 09:46 |