javascript - 有没有一种方法可以在 django 的文本中创建文本字段和颜色词？

Question

我创建了一个 django 项目：所以在我的页面 html 中，我有一个用不同背景颜色着色的单词列表：

hello (colored in red) 
world  (colored in yellow)

我这样做：

<span class="token-label" style="background-color=red">hello</span>

在同一页面中，我想显示包含两个单词的文本，但我想根据每个单词的颜色为文本中的单词着色：

 hello, i'am here ! hello world !    with "hello" colored with red and "world" in yellow 

标签： javascripthtmldjangoweb

Answer 1

我不能写出我的完整想法了解我想要达到的目标

我会用正则表达式来做，因为我可以有像你好，（如你的例子）或！世界！如果你想触发这些词，你必须使用正则表达式，我希望如此。你可能想分开！来自“世界”！它会像

<span>!<span><span class="world">world<span><span>!</span>


CODE:

<p class="text">
  hello, i'am here ! hello world ! 
</p>


.hello {
  background-color: red;
}


let text = document.getElementsByClassName('text')[0].innerHTML;

let text_split = text.split(' ')
let new_arr = []
for(let i = 0; i < text_split.length; i++) {
    new_arr.push(`<span class="${text_split[i].replace(',', 
'')}">${text_split[i]}</span>`)
}

document.getElementsByClassName('text')[0].innerHTML = new_arr.join(' ');

https://jsfiddle.net/tj67q1zd/