Alex961,
<!DOCTYPE HTML>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
span{
background-image: -webkit-gradient(linear, left, right, color-stop(0, #FFD700), color-stop(1, #FF0000));
background-image: -o-linear-gradient(left, #FFD700, #FF0000);
background-image: -moz-linear-gradient(left, #FFD700, #FF0000);
background-image: -webkit-linear-gradient(left, #FFD700, #FF0000);
background-image: linear-gradient(to right, #FFD700, #FF0000);
font-size: 24px;
font-weight: bold;
color: #FFFFFF;
padding: 6px 4px;
border-radius: 4px;
margin: 5px;
}
</style>
</head>
<body>
<script>
var text=prompt("enter a text")
.split(/\s+/)
.filter(function(word) {
return word && word.charAt(0)===word.charAt(word.length-1)
}).map(function(word) {
return '<span>'+word+'<\/span>'
});
text.forEach(function(word, i ) {
document.body.children[i].insertAdjacentHTML("beforeBegin", word);
})
</script>
</body>
</html>