Seperti pada editor HTML yang baru ada fitur Find & Replace Text pada kesempatan kali ini saya juga ingin share kode yang sama yaitu Javascript Find & Replace Text yang saya dapat dari sini seperti namanya, fungsi javascript ini untuk menemukan dan mengganti teks yang telah kita temukan...
DEMO
var haystackText = ""; function findMyText(needle, replacement) { if (haystackText.length == 0) { haystackText = document.getElementById("haystack").innerHTML; } var match = new RegExp(needle, "ig"); var replaced = ""; if (replacement.length > 0) { replaced = haystackText.replace(match, replacement); } else { var boldText = "<div style=\"background-color: yellow; display: inline; font-weight: bold;\">" + needle + "</div>"; replaced = haystackText.replace(match, boldText); } document.getElementById("haystack").innerHTML = replaced; }
Input HTML nya
<div id="haystack"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. </div> <br> <table> <tr><td>Temukan Kata</td><td><input id="needle" name="needle" type="text"></td></tr> <tr><td>Ganti Kata</td><td><input id="replacement" name="replacement" type="text"></td></tr> </table> <input type="button" value="Cari / Ganti" onClick="findMyText(document.getElementById('needle').value, document.getElementById('replacement').value);">
Dalam hal ini elemen dengan ID
haystack
yang akan digunakan sebagai tempat pencarian kata dan juga menggantinya, Jika anda ingin menggantinya dengan ID yang lain ganti juga ID yang ada pada javascriptnya yaitu pada baris yang seperti ini,document.getElementById("haystack").innerHTML;
Ada dua tuh baris yang seperti itu jadi ganti pada baris yang kedua juga jika ingin mengganti IDnya..