Javascript 有没有办法在django中创建文本字段和文本中的颜色词？

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

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

我是这样做的：

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

---

我不能写一个完整的想法，我想你可以自己写，这里有一个我想要创建的快速示例，它并不完美，因为它在.replace（）方法中使用了硬编码的regexp表达式，但我希望你能理解我想要实现的目标

我会使用regexp，因为我可以使用类似hello（如您的示例）或！世界如果你想触发这些单词，你必须使用regexp，我希望如此。你可能想分离！来自“世界”！ 大概是

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

！世界
代码：

你好，我在这里！你好，世界！

.你好{
背景色：红色；
}
让text=document.getElementsByClassName（'text'）[0].innerHTML；
let text_split=text.split（“”）
让新的_arr=[]
for（设i=0；i

---

实际上，如果只想给两个单词上色，可以将它们包装在span标记hello world中

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