通过逗号分隔的关键字突出显示文本

时间:2014-01-19 19:59:13

标签: javascript html css

我想用逗号分隔文字 - 即关键字如下:

keyword1, keyword2, keyword3, keyword4

如何为每个由逗号分隔的关键字设置黑色样式元素。是否有捷径可寻?文本总是动态的,所以我永远不知道这些关键字到底是什么以及有多少。因此每个关键字都应该有一个框元素。

<span class="keyword-option-black">keyword1, keyword2, keyword3, keyword4</span>

.keyword-option-black {
    color:white;
    background-size:contain;
    margin:10px;
    padding:5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    background:black;
}

3 个答案:

答案 0 :(得分:1)

CSS无法选择文字。

为了突出显示页面上的关键字,您需要使用JavaScript (对于客户端)或PHP (或其他任何服务器端)编程语言< / em>用包装元素包装关键字,该元素具有特殊的CSS样式以区分键。

在这里,我使用jQuery(只是为了演示)实现了上述方法:

<强> Working Fiddle

JS部分:

// Insert the keywords here,
// you can also get the keys automatically from the DOM if needed
var keywords = ['Google', 'Facebook', 'Social'];

$.each(keywords, function(index, key) {
    var $content = $('#content'),
        text = $content.html();

    $content.html(
        text.replace(
            new RegExp("("+ key +")", 'ig'), "<span class='highlight'>$1</span>"
        )
    );
});

这是highlight类:

.highlight {
    color: white;
    background-size: contain;
    margin:10px;
    padding:5px;
    border-radius: 5px;
    background: black;
}

答案 1 :(得分:0)

HTML和CSS是静态的。既然你不知道会有多少个关键词,你需要一些动态的东西。根据实施情况,您可以使用JavaScript或您正在使用的任何后端语言 基本上,您希望围绕每个关键字和样式添加span标记(跨越一个class keyword-option-black)。因此,当您向HTML输入关键字时,在循环中使用<span>keywordX</span>添加元素,或者在使用JavaScript加载文档时添加这些标记。
希望这会有所帮助。

答案 2 :(得分:0)

使用Django,我是按照以下方式完成的。

  1. 创建一个简单的CSS类来执行突出显示。
  2. 创建一个自定义标记,将模板视图中的数据拆分为<span class="keyword">A</span><span class="keyword">B</span>。它采用原始视图输出并将其解析为已包含跨度的格式。