Spring, Thymeleaf - Change color text

Question

I'm working on my project and at certain stage I need to change the color of certain words (Hashtags in this case).

I have this code in the controller:

(Note that 'resultado' is a valid string to get the tweets without problems)

 List<Tweet> listaTuits = twitter.searchOperations().search(resultado).getTweets();
    List<ObjetoTuit> listaPropia = new ArrayList<ObjetoTuit>(); 

I use listaPropia to get what I need from the original list

    for(int i=0; i<listaTuits.size();i++){
            Tweet enUso = listaTuits.get(i);

            String textoAManipular = enUso.getText();

            int contAux = this.listaDe5Elementos.getNumElementos();

            if(contAux>0 && textoAManipular.contains(this.listaDe5Elementos.getElemento1())){
                textoAManipular.replace(this.listaDe5Elementos.getElemento1(), "<span class=\"elem1\">"+this.listaDe5Elementos.getElemento1()+"</span>");
            }
            if(contAux>1 && textoAManipular.contains(this.listaDe5Elementos.getElemento2())){
                textoAManipular = textoAManipular.replace(this.listaDe5Elementos.getElemento2(), "<span class=\"elem2\">"+this.listaDe5Elementos.getElemento2()+"</span>");
            }
            if(contAux>2 && textoAManipular.contains(this.listaDe5Elementos.getElemento3())){
                textoAManipular = textoAManipular.replace(this.listaDe5Elementos.getElemento3(), "<span class=\"elem3\">"+this.listaDe5Elementos.getElemento3()+"</span>");
            }
            if(contAux>3 && textoAManipular.contains(this.listaDe5Elementos.getElemento4())){
                textoAManipular = textoAManipular.replace(this.listaDe5Elementos.getElemento4(), "<span class=\"elem4\">"+this.listaDe5Elementos.getElemento4()+"</span>");
            }
            if(contAux>4 && textoAManipular.contains(this.listaDe5Elementos.getElemento5())){
                textoAManipular = textoAManipular.replace(this.listaDe5Elementos.getElemento5(), "<span class=\"elem5\">"+this.listaDe5Elementos.getElemento5()+"</span>");
            }
            listaPropia.add(new ObjetoTuit(enUso.getId() ,textoAManipular, enUso.getFromUserId(), enUso.getFromUser(), enUso.getProfileImageUrl(), 
                    enUso.getUser().getLocation(),  enUso.getRetweetCount(), enUso.getFavoriteCount(), enUso.getCreatedAt()));
        }

At this moment I should have the complete list of items, and the 'textoAManipular' field should have a tag from class="elem1" to class="elem5"

ModelAndView mav = new ModelAndView("vistaPrincipal");
mav.addObject("listaobjetostuits", listaPropia);
return mav;

Ok and now, in the view:

<table class="table table-striped table-bordered">
        <thead>
            <tr>
                <th class="text-center">TEXTO</th>
                <th class="text-center">NOMBRE USUARIO</th>
                <th class="text-center">IMAGEN PERFIL</th>
                <th class="text-center">LOCALIZACION USUARIO</th>
                <th class="text-center">CONTADOR RETUITS</th>
                <th class="text-center">CONTADOR ME GUSTA</th>
                <th class="text-center">FECHA CREACION</th>
            </tr>
        </thead>
        <tbody th:each="tuit : ${listaobjetostuits}">
            <tr>
                <th th:text="${tuit.texto}"></th>
                <th th:text="${tuit.nombreUsuario}"></th>
                <th><img th:src="${tuit.urlImagenPerfil}" class="img-thumbnail" /></th>
                <th th:text="${tuit.localizacionUser}"></th>
                <th th:text="${tuit.numRT}"></th>
                <th th:text="${tuit.numMG}"></th>
                <th th:text="${tuit.fechaCreacion}"></th>
            </tr>
        </tbody>
    </table>   

And here comes the problem I try to explain before, I can not change the color of the text. I've tried what you told me, changing the id tag to class tag, using jQuery or even using a style:color tag.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(document).ready(function(){   
        $(".elem1").css("color", "red");
        $(".elem2").css("color", "blue");
        $(".elem3").css("color", "green");
        $(".elem4").css("color", "yellow");
        $(".elem5").css("color", "brown");   
});
</script>   

This doesn't work for me.

Any idea?

Answer 1

You should use CSS classes instead of ids. Because id should be unique in DOM tree, CSS classes not, and I assume you have more than one word of same kind.

CSS file:

.red { color:red; }
.green { color:green; }

Your replace method:

  text.replace(word, '<span class="red">' + word + '</span>')

With this code, you can replace multiple words, and gave them same CSS class, that will add the color.

In your case you would have to run your code after replace methods are called, which would be additional work, with CSS the browser will do the work for you.

UPDATE:

Your CSS should look like this:

<style>
    .red  { color: 'red' };
    .blue { color: 'blue'}; 
     ...
</style>

It seems to be working fine within this example. As you can see I have used a map to store all mappings (word to color). That was the code is shorter.

Map<String,String> mappings = new HashMap<>();
mappings.put("Trump", "red");

String t = "<th>#Lynch not #Trump #ComeyDay </th>";
for(Map.Entry<String,String> entry: mappings.entrySet()){
   t= t.replace(entry.getKey(), "<span class=\""+entry.getValue()+"\">" +entry.getKey() + "</span>");
}


System.out.print(t);

The output is:

<th>#Lynch not #<span class="red">Trump</span> #ComeyDay </th>