In: Computer Science
JavaScript Find and Replace Text
Main text: a text area with 3 rows and 20 columns. The default
text is “Hello testing”. The text area cannot be empty.
• Find text: a text box for the user to key in text he/she wants to
find.
• Replacement text: a text box for the user to key in the
replacement text. If the find text is empty, this element should be
disabled (i.e. user cannot key in anything here).
• Find and replace button: when click, it will find the occurrence
of the “find text” in the source language text area and replace it
with the “replacement text”. If either find text or replacement
text is empty, this button is disabled. After the replacement, a
message showing the number of replacements must be displayed beside
the button.
After clicking the find and replace button, it should replace the text inside the Main Textbox.
Example:
Main text: Apples
Find Text: A
Replacement Text: B
After clicking the replace button, it should find all the "A" in the main text and replace with "B". So the main text now will be "Bpples".
Code:
<html>
<head>
<title>making use of javascript</title>
<style type = "text/css">
</style>
</head>
<body>
<p>Content: </p>
<textarea rows="3" cols="20" id = "text">Hello testing</textarea> <!-- TEXTAREA OF 3 ROWS AND 20 COLUMNS AS MENTIONED-->
<p>Find text:
<input type="text" id = "find_text" >
</p>
<p>Replacement text:
<input id = "replacement_text" type="text">
</p>
<button id = "button" type="button">Find & Replace</button>
<text id="print_count"></text> <!-- TEXT FOR WRITING THE COUNT OF REPLACED-->
<script type = "text/javascript"> // JAVASCRIPT STARTED
document.getElementById("replacement_text").disabled=true; // INITIALLY DISABLED THE BUTTON AND REPLACEMENT TEXT
document.getElementById("button").disabled=true;
document.getElementById("find_text").addEventListener("change", function(){ // IF CHANGE IN FIND TEXT OCCURS AND LENGTH OF FIND TEXT IS NOT EMPTY THEN ENABLE THE REPLACEMENT VALUE BY MAKING DISABLED = FALSE
if( document.getElementById("find_text").value === ""){
document.getElementById("replacement_text").disabled=true;
document.getElementById("button").disabled=true;
}else{
document.getElementById("replacement_text").disabled=false;
if(document.getElementById("replacement_text").value != ""){
document.getElementById("button").disabled=false;
}
}
});
document.getElementById("replacement_text").addEventListener("change", function(){ // SAME IF CHANGE IN REPLACEMENT TEXT HAPPENS ENABLE THE BUTTON
if(document.getElementById("replacement_text").value === ""){
document.getElementById("button").disabled=true;
}else{
document.getElementById("button").disabled=false;
}
});
document.getElementById("button").onclick = function(){ // WHEN THE BUTTON IS CLICKED
var key = document.getElementById("find_text").value; // GET THE VALUE FROM FIND TEXT IN KEY
var replace_with = document.getElementById("replacement_text").value; // GET THE VALUE FROM REPLACEMENT TEXT IN REPLACE WITH
var str = document.getElementById("text").value; // GET THE VALUE OF TEXTAREA IN STR
var re = new RegExp(key, 'g'); // MAKE A REGULAR EXPRESSION WITH KEY TO FIND "G" IS FOR GLOBAL
var matched_words = str.match(re); // CALL MATCH FUNCTION OF STRING TO GET ALL THE MATCHED WORDS
var count = 0; // INITIALIZE THE COUNT TO 0
if (matched_words!== null) { // IF MATCHED WORDS IS NOT EMPTY
count = matched_words.length; // ASSING LENGTH OF MATCHED WORDS TO COUNT
}
var newstr = str.replace(re,replace_with); // NOW REPLACE THE STRING WITH REPLACE WITH VARIABLE BY PASSING THE REGULAR EXPRESSION OF KEY
document.getElementById("text").value=newstr; // ASSIGN THE NEW VALUE TO TEXT AREA
document.getElementById("print_count").innerHTML = count+" found "+count+" replaced"; // SHOW THE COUNT ON THE PAGE AS MENTIONED
}
</script>
</body>
</html>
Let me know if you have any doubts or if you need anything to change. If you are satisfied with the solution, please leave a +ve feedback : ) Let me know for any help with any other questions. Thank You! ===========================================================================