[JavaScript]kolorowanie liter - przepisanie z jQuery, uproszczenie kodu |
[JavaScript]kolorowanie liter - przepisanie z jQuery, uproszczenie kodu |
15.07.2020, 12:25:41
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 |
|
|
20.07.2020, 01:07:04
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. |
|
|
20.07.2020, 06:22:47
Post
#3
|
|
Grupa: Zarejestrowani Postów: 6 761 Pomógł: 1822 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: 26.04.2024 - 04:35 |