javascript怎么让关键字高亮的时候一个字和2个字以上高亮不同颜色,并写个例子
时间: 2023-03-29 09:00:17 浏览: 61
可以使用正则表达式和replace方法来实现这个功能。具体代码如下:
```javascript
// 定义关键字
const keywords = ['var', 'function', 'if', 'else', 'for', 'while'];
// 定义高亮颜色
const singleColor = '#FFA500'; // 一个字高亮颜色
const multiColor = '#FF000'; // 两个字以上高亮颜色
// 构造正则表达式
const reg = new RegExp(`\\b(${keywords.join('|')})\\b`, 'g');
// 替换文本中的关键字
const highlightedText = text.replace(reg, (match) => {
if (match.length === 1) {
return `<span style="color: ${singleColor}">${match}</span>`;
} else {
return `<span style="color: ${multiColor}">${match}</span>`;
}
});
// 将高亮后的文本插入到页面中
document.getElementById('content').innerHTML = highlightedText;
```
这段代码会将文本中的关键字高亮显示,一个字的关键字使用橙色,两个字以上的关键字使用红色。你可以将需要高亮的文本放到一个id为content的元素中,代码会自动将其高亮显示。