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

Question

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

keyword1, keyword2, keyword3, keyword4

对于每个用逗号分隔的关键字，我该如何使用黑色样式元素。 是否有捷径可寻？ 文本始终是动态的，因此我永远无法确切知道这些关键字将是多少。 因此，每个关键字周围应有一个box元素。

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

Answer 1

CSS无法选择文本。

为了突出显示页面上的关键字，您需要使用JavaScript （用于客户端）或PHP （或用于服务器端的其他语言）等编程语言，通过具有特殊CSS样式的wrapper元素来包装关键字区分按键。

在这里，我通过使用jQuery实现了上述方法（仅用于演示）：

工作小提琴

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

Answer 2

HTML和CSS是静态的。 由于您不知道会有多少个关键字，因此需要动态的内容。 根据实现的不同，您可以使用JavaScript或所用的任何后端语言。
基本上，您希望在每个关键字和跨度的样式周围添加一个span标记（跨度与class keyword-option-black合并）。 因此，当您输入HTML关键字时，请在循环中使用<span>keywordX</span>添加元素，或者在使用JavaScript加载文档时添加这些标签。
希望这可以帮助。

Answer 3

使用Django，我按照以下方式进行操作。

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