3

我想将字体系列（Arial）更改为 HTML 文档中存在的单词“AAAAA”。该词可以多次来自 DB，但我需要单独替换该单个词的字体。

我认为它将由 JavaScript 完成。有人知道怎么做吗？

4

3 回答 3

3

假设我们需要格鲁吉亚

  .geo{
    font-family:Georgia;
    font-style:italic;
    font-weight:bold;
    font-size:19px;
  }

演示

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>')); 
});

如果<span>可能会给您带来问题（通常通过 DOM 使用）...我建议使用<font>：<font class="geo">AAAAA</font>

于 2012-04-26T06:45:54.340 回答
2 
$.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>";
        });
    });
};

叫它

$('#myDiv').changeWord('specialWord', 'sw');

演示。

更新： 演示。

于 2012-04-26T06:50:38.673 回答
1 
<!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>
于 2012-04-26T07:19:54.330 回答