String Formatting Functions
- JavaScript string is considered as an object.
- You can format the string object dynamically by using following methods:
Method Description
-------------------------------------------------------
fontcolor() Sets text color
fontsize() Sets text size
bold() Bold
italics() Italic
sup() Super Script
sub() Sub Script
toUpperCase() Convert all chars to uppercase
toLowerCase() Convert all chars to lowercase
Note : All string formatting methods render HTML.
fondcolor('red') = <font color='red'>
Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<title>String</title>
<script>
function Verifyuser(){
var username = document.getElementById("UserName").value;
var userMsg = document.getElementById("userMsg");
if(username.length < 4){
userMsg.innerHTML = "Name too short".fontcolor('red');
}else{
userMsg.innerHTML = "Name Verified".fontcolor('green');
}
}
function ChangeCase(){
var username = document.getElementById("UserName").value;
document.getElementById("UserName").value = username.toUpperCase();
}
</script>
</head>
<body>
<dl>
<dt>User Name</dt>
<dd><input placeholder="Name Block Letters only" onblur="ChangeCase()"
type="text" onkeyup="Verifyuser()" id="UserName"></dd>
<dd id="userMsg"></dd>
</dl>
</body>
</html>
Formatting String using Styles
- JavaScript allows to define styles dynamically for any HTML element.
- Style attributes are referred in CamelCase.
- Style attributes are not applied to string, they are applied to element that
handles string.
Syntax:
userMsg.style.backgroundColor = "red";
Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<title>String</title>
<script>
function Verifyuser(){
var username = document.getElementById("UserName").value;
var userMsg = document.getElementById("userMsg");
if(username.length < 4){
userMsg.innerHTML = "Name too short";
userMsg.style.color = "red";
}else{
userMsg.innerHTML = "Name Verified";
userMsg.style.color = "green";
userMsg.style.fontStyle = "italic";
}
}
function ChangeCase(){
var username = document.getElementById("UserName").value;
document.getElementById("UserName").value = username.toUpperCase();
}
</script>
</head>
<body>
<dl>
<dt>User Name</dt>
<dd><input placeholder="Name Block Letters only" onblur="ChangeCase()"
type="text" onkeyup="Verifyuser()" id="UserName"></dd>
<dd id="userMsg"></dd>
</dl>
</body>
</html>
Ex: You can apply effects by using CSS class
- You have to use the property "classname".
Ex:
<!DOCTYPE html>
<html lang="en">
<head>
<title>String</title>
<link rel="stylesheet" href="">
<script>
function Verifyuser(){
var username = document.getElementById("UserName").value;
var userMsg = document.getElementById("userMsg");
if(username.length < 4){
userMsg.innerHTML = "Name too short";
userMsg.className = "text-danger";
}else{
userMsg.innerHTML = "Name Verified";
userMsg.className = "text-success";
}
}
function ChangeCase(){
var username = document.getElementById("UserName").value;
document.getElementById("UserName").value = username.toUpperCase();
}
</script>
</head>
<body>
<dl>
<dt>User Name</dt>
<dd><input placeholder="Name Block Letters only" onblur="ChangeCase()"
type="text" onkeyup="Verifyuser()" id="UserName"></dd>
<dd id="userMsg"></dd>
</dl>
</body>
</html>
