<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Strings Example</title>
<style>
body { font-family: Arial, sans-serif;
}
.container { margin: 20px;
}
#output { margin-top: 20px;
padding: 10px;
border: 1px solid #ccc;
}
</style>
<script>
function manipulateStrings() { let originalString = " Hello, JavaScript! Let's manipulate strings. ";
let trimmedString = originalString.trim();
let upperCaseString = trimmedString.toUpperCase();
let lowerCaseString = trimmedString.toLowerCase();
let substring = trimmedString.substring(7, 18);
let replacedString = trimmedString.replace("JavaScript", "HTML and CSS"); let splitString = trimmedString.split(" ");
let output = `
<p>Original String: "${originalString}"</p> <p>Trimmed String: "${trimmedString}"</p> <p>Upper Case: "${upperCaseString}"</p> <p>Lower Case: "${lowerCaseString}"</p> <p>Substring (7, 18): "${substring}"</p> <p>Replaced "JavaScript" with "HTML and CSS": "${replacedString}"</p> <p>Split String by space: [${splitString.join(', ')}]</p> `;
document.getElementById("output").innerHTML = output; }
</script>
</head>
<body onload="manipulateStrings()">
<div class="container">
<h1>JavaScript Strings Example</h1>
<div id="output"></div>
</div>
</body>
</html>
