I want to change the Font family(Arial) to a word 'AAAAA' that was present in a HTML document. That word can es many times from DB but I need to replace the font for that single word alone.
I think it will done by JavaScript. Could any one knows how to do it?
I want to change the Font family(Arial) to a word 'AAAAA' that was present in a HTML document. That word can es many times from DB but I need to replace the font for that single word alone.
I think it will done by JavaScript. Could any one knows how to do it?
Share Improve this question asked Apr 26, 2012 at 6:28 Sankar SubburajSankar Subburaj 5,04212 gold badges50 silver badges79 bronze badges 7- give that element a seperate Id, then change the font. – sgowd Commented Apr 26, 2012 at 6:29
- Possibility duplicate of stackoverflow./questions/1411026/… & stackoverflow./questions/5059682/… – Ramesh Commented Apr 26, 2012 at 6:35
-
Yep. To clarify, find the word, put it in a new element and assign the ID to tha element. Or alternatively, give the element the desired
style.fontFamily. – Mr Lister Commented Apr 26, 2012 at 6:36 - We have some CMS pages, that word will e from that way also. And more over any user ments on the site will also needs to change the font. – Sankar Subburaj Commented Apr 26, 2012 at 6:39
- 2 @Sankar, if you look at the questions linked, it will show you how to identify a word and surround it with a span tag at client side. Then you can change the fontfamily, color and do what every stying you want by applying css class the element. – Ramesh Commented Apr 26, 2012 at 6:42
3 Answers
Reset to default 3Let's say we need Georgia
.geo{
font-family:Georgia;
font-style:italic;
font-weight:bold;
font-size:19px;
}
demo
var $els = $('body *'); // iterate through all elements // or define specific for performance.
$els.each(function(){
$(this).html($(this).text().replace(/AAAAA/g, '<span class="geo">AAAAA</span>'));
});
IF the <span> could give you problems (as monly used through the DOM) ... I'd suggest to use <font> : <font class="geo">AAAAA</font>
$.fn.changeWord = function (str, className) {
var regex = new RegExp(str, "gi");
return this.each(function () {
this.innerHTML = this.innerHTML.replace(regex, function(matched) {
return "<span class='" + className + "'>" + matched + "</span>";
});
});
};
Call it
$('#myDiv').changeWord('specialWord', 'sw');
DEMO.
Update: DEMO.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
//$('body').replaceWith( $('<div></div>').append($(body).clone()).html().replace(/AAAA/g, '<span style="font-family: Arial; color:red;">AAAA</span>');
//Or
// global and case sensitive search in string
$('#replaceTest2').replaceWith($('<div></div>').append($('#replaceTest2').clone()).html().replace(/AAAA/g, '<span style="font-family: Arial; color:red;">AAAA</span>'));
// global and case insensitive search in string
$('#replaceTest3').replaceWith($('<div></div>').append($('#replaceTest3').clone()).html().replace(/AAAA/gi, '<span style="font-family: Arial; color:red;">AAAA</span>'));
});
</script>
<style type="text/css">
body
{
font-family: Batang;
font-style: italic;
font-weight: bolder;
}
</style>
</head>
<body>
<h1>
Original Text
</h1>
<div id="replaceTest1">
Hi.. testing <span style="font-family: Ebrima;">test aaaa</span>
<div>
<span style="font-family: Bookshelf Symbol 7; font-style: normal;">rreee AAAA </span>
test
</div>
</div>
<h1>
Original Text Replace ( global and case sensitive search in string )
</h1>
<div id="replaceTest2">
Hi.. testing <span style="font-family: Ebrima;">test aaaa</span>
<div>
<span style="font-family: Bookshelf Symbol 7; font-style: normal;">rreee AAAA </span>
test
</div>
</div>
<h1>
Original Text Replace ( global and case insensitive search in string )
</h1>
<div id="replaceTest3">
Hi.. testing <span style="font-family: Ebrima;">test aaaa</span>
<div>
<span style="font-family: Bookshelf Symbol 7; font-style: normal;">rreee AAAA </span>
test
</div>
</div>
</body>
</html>