CODEWITHSUNDEEP
javascriptjquerycssfontsfont-family
Sankar Subburaj
Sankar Subburaj

Reputation: 5042

Need to replace font for a particular word

I want to change the Font family(Arial) to a word 'AAAAA' that was present in a HTML document. That word can comes 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?

Upvotes: 3

Views: 3313

Answers (3)

The Alpha
The Alpha

Reputation: 146191

$.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.

Upvotes: 2

Thulasiram
Thulasiram

Reputation: 8552

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/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>

Upvotes: 1

Roko C. Buljan
Roko C. Buljan

Reputation: 206121

Let'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 commonly used through the DOM) ... I'd suggest to use <font> : <font class="geo">AAAAA</font>

Upvotes: 3

Related Questions