[JavaScript]kolorowanie liter - przepisanie z jQuery, uproszczenie kodu Opcje

[stellatus]

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

[SmokAnalog]

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.

[trueblue]

$("#toFind").val() można zamienić na $(this).val().

Autor przepisał jQuery na czysty JS.