如何在html元素文本中为特定字母着色？

Question

我有一些span内容,比如

        <span id="phrase">Here are some words</span>

我需要将所有'e'角色涂成红色.

我想span.innerText property从span元素中删除文本节点,并在内部(或替代)添加更多的跨度,并为它们提供必要的样式.

它是唯一的方式,还是可以以更优雅的方式解决？

Answer 1

你肯定可以用javascript做到这一点:

var span = document.getElementById('phrase'),
    text = span.innerHTML.split('').map(function(el) {
        return '<span class="char-' + el.toLowerCase() + '">' + el + '</span>';
    }).join('');
  
span.innerHTML = text;

.char-e {
    color: red;
}

<span id="phrase">Here are some words</span>

为方便起见,它使用带有相应类名的span来包装每个字符,这样可以轻松分配各个样式.

警告:但是我不建议对大文本执行此操作,因为上面的代码替换innerHTML它可能会破坏HTML,如果它包含其他嵌套元素.但对于只有文字的小标题,这不会成为问题.

如果您想使用更复杂的HTML标记(使用子元素),则需要改进该函数以递归地处理子项文本内容.