Spring，Thymeleaf-更改颜色文本

Question

我正在做我的项目，在某个阶段，我需要更改某些单词的颜色（在本例中是Hashtags）。

控制器中有以下代码：

（请注意，“resultado”是一个有效字符串，可以毫无问题地获取推文）

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

我使用listaPropia从原始列表中获取所需内容

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

此时，我应该有完整的项目列表，“textoAManipular”字段应该有一个从class=“elem1”到class=“elem5”的标记

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

现在，在视图中：

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

这是我之前试图解释的问题，我不能改变文本的颜色。我尝试了你告诉我的，将id标记更改为class标记，使用jQuery，甚至使用样式：color标记。

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

这对我不起作用。

知道吗？

Answer 1

您应该使用CSS类而不是ID。因为id在DOM树中应该是唯一的，CSS类不是，我假设您有多个相同类型的单词。

CSS文件：

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

您的替换方法：

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

使用此代码，您可以替换多个单词，并为它们提供相同的CSS类，这将添加颜色。

在您的情况下，您必须在调用替换方法后运行代码，这将是额外的工作，使用CSS，浏览器将为您完成这项工作。

更新：

您的CSS应该如下所示：

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

在这个例子中，它似乎工作得很好。如您所见，我使用了一个映射来存储所有映射（文字到颜色）。那就是代码较短。

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

输出为：

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