需要替换特定单词的字体答案

【问题标题】：Need to replace font for a particular word需要替换特定单词的字体
【发布时间】：2012-05-06 21:10:41
【问题描述】：

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

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

【问题讨论】：

给该元素一个单独的 ID，然后更改字体。
stackoverflow.com/questions/1411026/… & stackoverflow.com/questions/5059682/… 的可能重复
是的。为了澄清，找到这个词，把它放在一个新的元素中，并将 ID 分配给 tha 元素。或者，给元素提供所需的style.fontFamily。
我们有一些 CMS 页面，这个词也将来自这种方式。此外，网站上的任何用户 cmets 还需要更改字体。
@Sankar，如果您查看链接的问题，它将向您展示如何识别单词并在客户端用 span 标签包围它。然后，您可以通过对元素应用 css 类来更改字体系列、颜色并做任何您想做的事情。

标签： javascript jquery css fonts font-family

【解决方案1】：

$.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');

DEMO.

更新： DEMO.

【讨论】：

它正在工作，但它有一些问题。 tr 使用以下代码
specialWord google.com/specialWord">specialWord</a>
我在 JQuery -1.7.1 中遇到了同样的问题。
Heera 这个问题还没有解决。检查以下链接的源代码。它也替换了链接中的内容。 fiddle.jshell.net/x9BSn/2/show
您正在尝试更改链接文本，这不是您的问题，因此根据您的问题给出了答案。 jsfiddle.net/x9BSn/8

【解决方案2】：

<!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>

【讨论】：

【解决方案3】：

假设我们需要格鲁吉亚

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

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

【讨论】：