Question

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

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

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

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

使用CSS：

.twitter {
    color: #00ACED;
}

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

任何人都可以帮助我解决这个问题。如果有任何不同，我正在使用WordPress。

Answer 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]);
};

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

Answer 2

我认为最直接的方法是使用我遇到的智能jQuery highlight插件。应用它之后，您将能够完成您所追求的目标。下面是一个例子，最后有一个直播小提琴的链接：

<强> 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; }

突出显示插件（需要在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
});

Fiddle for the win！：）

Answer 3

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

Answer 4

对于那些对答案感兴趣的人，我使用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;}

将CSS重复应用于特定单词

4 个答案: