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

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

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

CSS 无法选择文本。

为了突出页面上的关键词，需要使用JavaScript等编程语言（对于客户端） or PHP （或服务器端的其他任何内容）用包装元素包装关键字，该元素具有特殊的 CSS 样式来区分键。

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

工作小提琴

JS part:

// 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 class:

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