Please Test This Form If You Find Any Problems Please Descri ✓ Solved

Please Test This Html Form If You Find Any Problems Please Describe

Please test this HTML form. If you find any problems, please describe what each problem is and what the expected behavior would be. Instructions: The form is supposed to take an input string, find all instances of the "Find" string, and replace those instances with the "Replace" string. The tool also displays the input text and highlights the strings that were replaced in yellow.

Sample Paper For Above instruction

body {

font-family: Arial, sans-serif;

margin: 20px;

}

form {

margin-bottom: 20px;

}

label {

display: inline-block;

margin-top: 10px;

font-weight: bold;

}

input[type="text"], textarea {

width: 100%;

padding: 8px;

box-sizing: border-box;

margin-top: 4px;

}

button {

margin-top: 12px;

padding: 10px 20px;

font-size: 16px;

cursor: pointer;

}

output {

margin-top: 20px;

}

.highlight {

background-color: yellow;

}

originalText, #highlightedText {

border: 1px solid #ccc;

padding: 10px;

white-space: pre-wrap;

}

HTML Form for Text Find and Replace Testing

Input Text:

Find:

Replace:

Go

function escapeHtml(text) {

const div = document.createElement('div');

div.textContent = text;

return div.innerHTML;

}

function processText() {

const inputText = document.getElementById('inputText').value;

const findStr = document.getElementById('findString').value;

const replaceStr = document.getElementById('replaceString').value;

// Display original text with escaping

document.getElementById('originalText').textContent = inputText;

if (!findStr) {

alert('Please enter a find string.');

document.getElementById('highlightedText').innerHTML = '';

return;

}

// Generate regex for all case-insensitive, global replacements

const regex = new RegExp(escapeRegExp(findStr), 'gi');

// Create the highlighted version

let highlightHtml = '';

let lastIndex = 0;

let match;

const originalTextLower = inputText.toLowerCase();

const findStrLower = findStr.toLowerCase();

// Use matchAll if supported

if (typeof inputText.matchAll === 'function') {

matchAllResults = [...inputText.matchAll(regex)];

} else {

// fallback

var matchAllResults = [];

let m;

while ((m = regex.exec(inputText)) !== null) {

matchAllResults.push(m);

}

}

let resultHtml = '';

let currentIndex = 0;

// Collect all matches to process

matchAllResults.forEach(function(m) {

// find span

const start = m.index;

const end = start + m[0].length;

// Append text before match

const beforeMatch = inputText.substring(currentIndex, start);

resultHtml += escapeHtml(beforeMatch);

// Append highlighted match

const matchedText = inputText.substring(start, end);

resultHtml += '' + escapeHtml(matchedText) + '';

currentIndex = end;

});

// Append remaining text

resultHtml += escapeHtml(inputText.substring(currentIndex));

// Replace all instances of findStr with replaceStr (case-insensitive)

const replacedText = inputText.replace(regex, replaceStr);

// Also create highlighted replacement

const highlightReplacedHtml = replacedText.replace(regex, function(match) {

return '' + escapeHtml(match) + '';

});

document.getElementById('highlightedText').innerHTML = highlightReplacedHtml;

}

function escapeRegExp(string) {

// Escape special characters for regex

return string.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');

}