将 CSS 重复应用于特定单词

Posted 2023-03-05

【中文标题】将 CSS 重复应用于特定单词

【英文标题】：Apply CSS Repeatedly to Specific Words

【发布时间】：2013-10-11 23:01:40

【问题描述】：

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

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

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

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

使用 CSS：

.twitter 
    color: #00ACED;

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

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

【问题讨论】：

用JS来实现。

从长远来看，您最好为这些类添加前缀。例如，“word-twitter”而不仅仅是“twitter”。否则，您将来的样式可能会出现问题。

@JamesDonnelly 对不起，我不太精通编码网站，我更多地参与设计方面。你能用更简单的方式解释一下吗？你会如何改变我正在做的事情？

【参考方案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]);
;

注意：我根本没有对此进行测试。

【讨论】：

感谢您的建议。这段代码可以简单地复制到 WordPress 的 functions.php 文件中还是我需要对其进行添加？

你会想把它放在一些脚本标签之间。也许让它等到 DOM 加载之后。您还需要在 JS 控制台中检查它是否存在错误。

这是javascript@jordanhuxley，而不是PHP。你最好把它放在一个专用的 .js 文件中，并在结束 </body> 标记之前包含它。

@Ethan，关闭您在最后一个 add_class 之后打开的括号。 ;)

我创建了一个单独的 JS 文件并插入到结束

【参考方案2】：

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

【参考方案3】：

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

【参考方案4】：

我认为最直接的方法是使用我遇到的智能jQuery highlight 插件。应用它后，您将能够做您所追求的。下面是一个示例，末尾有一个 live fiddle 的链接：

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