textarea 实现输入关键字高亮
时间: 2024-03-20 17:39:14 浏览: 29
实现输入关键字高亮可以使用 JavaScript 和 CSS 实现,具体步骤如下:
1. 获取 textarea 中的输入内容和关键字。
```javascript
const textarea = document.querySelector('textarea')
const keyword = '关键字'
const content = textarea.value
```
2. 将内容复制到一个隐藏的 div 中,并用 span 标签将关键字包裹起来。
```javascript
const div = document.createElement('div')
div.style.display = 'none'
div.innerHTML = content.replace(new RegExp(keyword, 'g'), `<span class="highlight">${keyword}</span>`)
```
3. 在 CSS 中给高亮的 span 标签添加样式。
```css
.highlight {
background-color: yellow;
}
```
4. 将 div 中的内容插入到 textarea 的后面,并监听 textarea 的输入事件。
```javascript
textarea.parentNode.insertBefore(div, textarea.nextSibling)
textarea.addEventListener('input', () => {
const content = textarea.value
div.innerHTML = content.replace(new RegExp(keyword, 'g'), `<span class="highlight">${keyword}</span>`)
})
```
这样,当用户在 textarea 中输入或删除字符时,会动态更新 div 中的内容和样式,实现输入关键字高亮的效果。