javascript - Spring, Thymeleaf - 更改颜色文本

Question

我正在做我的元素，在某个阶段我需要更改某些词的颜色(在这种情况下是标签)。

我在 Controller 中有这段代码:

(请注意，'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;

好的，现在，在 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>   

这就是我之前尝试解释的问题，我无法更改文本的颜色。我已经尝试过您告诉我的方法，将 id 标记更改为 class 标记，使用 jQuery 甚至使用 style: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 来存储所有映射(单词到颜色)。那是代码更短。

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>