改变thymeleaf表单元格中子字符串的颜色不工作

niwlg2el  于 2021-06-30  发布在  Java
关注(0)|答案(1)|浏览(487)

我正在将用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();
    }

但是如果你想改变字符的颜色,使用第一个编辑部分的方法。

vybvopom

vybvopom1#

我试过你的案例,它在chrome和firefox中都很适合我。我想我们需要详细说明你的css。如果这个标记确实被添加到td的html内容中,那么你的css就有问题了。您可以查看浏览器的开发人员工具(通常通过f12调用)在td中找到行为不端的标记,并详细说明实际应用的样式表属性。也许有!代码中其他地方的重要属性将覆盖您的设置。

<html>
<head>
    <style>
        mark.red {
            color:#ff0000;
            background: none;
        }
        table, tr  {
            border: 1px solid black;
        }
        th  {
            border-top: 1px solid black;
        }
    </style>
</head>
<body>

<table>

    <tr>
        <th>
            ID
        </th>
        <th>
            Sentence
        </th>
        <th>
            Other Column
        </th>
    </tr>

    <tr>
        <th>
            1
        </th>
        <th>
            Hello World
        </th>
        <th>
            Today
        </th>
    </tr>

    <tr>
        <th>
            1
        </th>
        <th>
            Emmanuel <mark class="red">Macron</mark> meets Angela Merkel on Friday to discuss refugee crisis.
        </th>
        <th>
            Today
        </th>
    </tr>

</table>

</body>
</html>

相关问题