首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在contenteditable=上键入“true”时更改特定单词的颜色

在contenteditable上键入"true"时更改特定单词的颜色,可以通过使用JavaScript来实现。以下是一个实现的示例:

代码语言:txt
复制
<!DOCTYPE html>
<html>
<head>
    <title>Change Word Color on contenteditable</title>
    <style>
        .highlight {
            color: red;
        }
    </style>
</head>
<body>
    <div contenteditable="true" id="editableDiv">
        Type "true" to change specific word color.
    </div>

    <script>
        document.getElementById("editableDiv").addEventListener("input", function() {
            var content = this.innerHTML;
            var highlightedContent = content.replace(/true/g, '<span class="highlight">true</span>');
            this.innerHTML = highlightedContent;
        });
    </script>
</body>
</html>

在上述示例中,我们使用了contenteditable属性将一个div元素设置为可编辑。然后,我们通过JavaScript监听div的input事件,当用户输入内容时触发相应的函数。

在函数中,我们首先获取div的innerHTML,即用户输入的内容。然后,我们使用正则表达式将所有出现的"true"替换为带有highlight类的span标签,从而改变特定单词的颜色。最后,我们将修改后的内容重新赋值给div的innerHTML,以更新显示。

请注意,上述示例中的样式类.highlight定义了特定单词的颜色为红色。您可以根据需要自定义样式。

这是一个简单的实现示例,您可以根据实际需求进行修改和扩展。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

没有搜到相关的沙龙

领券