3

我正在尝试将 CSS 重复并自动应用于特定的单词。

例如，对于单词“Twitter”，我希望文本的颜色为#00ACED。

目前，我正在使用跨度类围绕特定品牌术语手动应用这些颜色：

<span class="twitter">Twitter</span>

使用 CSS：

.twitter {
    color: #00ACED;
}

但是，这是一个过程，我更喜欢自动完成此样式的方法。我有大约 20 个带有相关颜色样式的品牌词。

谁能帮我解决这个问题。如果这有什么不同，我正在使用 WordPress。

4

4 回答 4

2

我认为最直接的方法是使用我遇到的智能jQuery 高亮插件。应用它后，您将能够做您所追求的。下面是一个例子，最后有一个现场小提琴的链接：

HTML

<p>Some examples of how to highlight words with the jQuery Highlight plugin. First an example to demonstrate the default behavior and then others to demonstrate how to highlight the words Facebook and Twitter with their own class names. Words will be highlighted anywhere in the DOM, one needs only to be specific on where the script should look for the words. It supports case-sensitivity and other options, like in the case of YouTube.</p>

CSS

p { line-height: 30px; }
span { padding: 4px; }
.highlight { background-color: yellow; }
.facebook { background-color: #3c528f; color: white; }
.twitter { background-color: #1e9ae9; color: white; }
.youtube { background-color: #be0017; color: white; }

Highlight Plugin（需要jQuery在下面之前和之前加载JavaScript）

<script type="text/javascript" src="http://github.com/bartaz/sandbox.js/raw/master/jquery.highlight.js"></script>

JS

// default
$("body p").highlight("default");
// specify class name (not case sensitive)
$("body p").highlight("twitter", { className: 'twitter' });
$("body p").highlight("facebook", { className: 'facebook' });
// specify class name (case sensitive)
$("body p").highlight("YouTube", { className: 'youtube', caseSensitive: true });

将其包含JavaScript在页面底部（在body结束标记之前，这样您就不需要使用以下功能：

$(document).ready(function() {
   // unnecessary if you load all your scripts at the bottom of your page
});

为胜利而战！:)

于 2013-10-06T23:07:03.523 回答
1

这样的事情可能会奏效。您将不得不遍历您的搜索词，这可能不是最有效的方法。

function add_class (search, replacement) {
    var all = document.getElementsByTagName("*");
    for (var i=0, max=all.length; i < max; i++) {
         var text = all[i].textContent || all[i].innerText;
         if (text.indexOf(search) !== -1 && ! all[i].hasChildNodes()) {
            all[i].className = all[i].className + " " + replacement;
         }
    }
}

var replacements = [
    ["Twitter","twitter"],
    //
]

for (var i = replacements.length - 1; i >= 0; i--) {
    add_class(replacements[i][0],replacements[i][1]);
};

注意：我根本没有测试这个。

于 2013-10-04T20:12:16.690 回答
0

对于那些对答案感兴趣的人，我使用 WordPress 功能创建了一个解决方案：

function replace_custom_word($text){
    $replace = array(
    'Twitter' => '<span class="twitter"><a title="Twitter" target="_blank" href="http://www.twitter.com/">Twitter</a></span>',
    'Facebook' => '<span class="facebook"><a title="Facebook" target="_blank" href="http://www.facebook.com/">Facebook</a></span>'
    );

$text = str_replace(array_keys($replace), $replace, $text);
return $text;}
于 2013-10-05T10:41:08.517 回答
0

如果您对 JavaScript 了解最少，那么这个 JavaScript 库可以让您的生活更轻松。它将字符串中的所有字母转换为跨度标记。 http://daverupert.com/2010/09/lettering-js/

于 2013-10-04T20:51:08.953 回答