Changing colour of substring in Thymeleaf table cell not working

I am rewriting old legacy system written in PHP/HTML into Java/SpringBoot/Thymeleaf. In the old system, there is table displaying search result. In the column “Sentence” I call this function in order to highlight search keywords inside the sentence string.

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

JavaScript
​x
 
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;}​

Example: seach keyword is “Macron” and the sentence queried from database is “Emmanuel Macron meets Angela Merkel on Friday to discuss refugee crisis.” So “Macron” substring of the sentence has yellow colour.

Now I am trying to do the same thing in Thymeleaf so I wrote this Java method:

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

JavaScript
 
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();    }​

In my Thymeleaf template I call the method:

<td th:text="${T(util.DataRepresentationUtils).highlightSearchParams(result.sentence, keywords)}">...</td>

JavaScript
 
<td th:text="${T(util.DataRepresentationUtils).highlightSearchParams(result.sentence, keywords)}">...</td>        ​

And to CSS, I added the style:

mark.red {
    color:#ff0000;
    background: none;
}

JavaScript
 
mark.red {    color:#ff0000;    background: none;}​

But it does not work. Colour of the substring is not changed though tag was added to the substring. Does anybody knows what the problem is please?

Thank you

EDIT:

I changed my style to:

.keyword {
  color: black;
}

JavaScript
 
.keyword {  color: black;}​

and Java method to:

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

JavaScript
 
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();    }​

EDIT 2:

I realized that I don’t need CSS style at all as I want my characters to have black colour. So I changed my Java method to:

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

JavaScript
 
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();    }​

But if you want to change characters colour, use the approach from the first EDIT section.

Answer

I tried out your case and it works fine for me in both Chrome and Firefox. I think we need to elaborate your CSS. If the mark is indeed added to the html content of the td then something is going on with your CSS. You may have a look in the developer tools of your browser. (Usually invoked via F12) Find the misbehaving mark in your td and Elaborate the Style-Sheet attributes that actually are applied. Maybe some !important attribute elsewhere in the code overrides your settings.

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

JavaScript
 
<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>​

Advertisement

Answer