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)
});
$("#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;
}
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>
<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;
});
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;
}
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>
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
