我正在将用php/html编写的旧遗留系统重写为java/springboot/thymeleaf。在旧系统中,有一个表格显示搜索结果。在“句子”列中,我调用此函数以突出显示句子字符串中的搜索关键字。
function highlightKeywords($sentence, $keywords_array){
$resultSentence = "";
$sentenceArray = explode(" ", $sentence);
for($i = 0; $i < count($sentenceArray); $i++){
$token = $sentenceArray[$i];
if(containsToken($token, $keywords_array)){
$token = "<mark>".$token."</mark>";
}
$resultSentence = $resultSentence." ".$token;
}
return $resultSentence;
}
示例:seach关键字是“macron”,从数据库中查询到的句子是“emmanuel macron在星期五会见angela merkel讨论难民危机”,因此句子的“macron”子串为黄色。
现在我正尝试在thymeleaf中做同样的事情,所以我编写了以下java方法:
public static String highlightSearchParams(String sentence, String keyword) {
StringBuilder stringBuilder = new StringBuilder();
String[] tokens = sentence.split(" ");
for (String token : tokens) {
if (keyword.equals(token)) {
token = "<mark class=\"red\">" + token + "</mark>";
}
stringBuilder.append(token);
stringBuilder.append(" ");
}
return stringBuilder.toString();
}
在我的thymeleaf模板中,我调用以下方法:
<td th:text="${T(util.DataRepresentationUtils).highlightSearchParams(result.sentence, keywords)}">...</td>
在css中,我添加了样式:
mark.red {
color:#ff0000;
background: none;
}
但它不起作用。子串的颜色没有改变,尽管标签被添加到子串中。有人知道问题出在哪里吗?
谢谢您
编辑:
我把我的风格改为:
.keyword {
color: black;
}
和java方法:
public static String highlightSearchParams(String sentence, String keywordsString) {
StringBuilder stringBuilder = new StringBuilder();
String[] tokens = sentence.split(" ");
String[] keywords = keywordsString.split(" ");
for (String token : tokens) {
for (String keyword : keywords) {
if (!"".equals(keyword) && !" ".equals(keyword) && keyword.equals(token) || token.contains(keyword)) {
token = "<mark class=\"keyword\">" + token + "</mark>";
}
}
stringBuilder.append(token);
stringBuilder.append(" ");
}
return stringBuilder.toString();
}
编辑2:
我意识到我根本不需要css样式,因为我希望我的角色有黑色。所以我把java方法改为:
public static String highlightSearchParams(String sentence, String keywordsString) {
StringBuilder stringBuilder = new StringBuilder();
String[] tokens = sentence.split(" ");
String[] keywords = keywordsString.split(" ");
for (String token : tokens) {
for (String keyword : keywords) {
if (!"".equals(keyword) && !" ".equals(keyword) && keyword.equals(token) || token.contains(keyword)) {
token = "<mark>" + token + "</mark>";
}
}
stringBuilder.append(token);
stringBuilder.append(" ");
}
return stringBuilder.toString();
}
但是如果你想改变字符的颜色,使用第一个编辑部分的方法。
1条答案
按热度按时间vybvopom1#
我试过你的案例,它在chrome和firefox中都很适合我。我想我们需要详细说明你的css。如果这个标记确实被添加到td的html内容中,那么你的css就有问题了。您可以查看浏览器的开发人员工具(通常通过f12调用)在td中找到行为不端的标记,并详细说明实际应用的样式表属性。也许有!代码中其他地方的重要属性将覆盖您的设置。