开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

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

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

<!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定义了特定单词的颜色为红色。您可以根据需要自定义样式。

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

相关搜索:C# WinForm:选择特定的单词并更改颜色 Visual Studio代码更改特定单词的颜色为ContentEditable=为“true”的元素在溢出时向左滚动文本在<td>中更改单词的颜色长度在dataframe上查找特定的单词在WinGHCi中更改特定字符的输出颜色在x秒后自动更改文本中单词的字体颜色在单击时更改图片特定区域的颜色在更改导航栏上的背景颜色时遇到问题。在焦点上更改EditText的图标颜色

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

可以提高web前端开发效率的6个浏览器书签，建议你赶快用起来吧

如果你想看看它是如何工作的，首先使用相关的键盘快捷键进入浏览器的控制台：contenteditable="true"``contentEditable="true" Chrome: Option + ⌘...开发人员可能希望在处理光学不平衡时更好地可视化边界（即，当某些东西“看起来不对”时，即使它不是）、边距崩溃（当某些边距被忽略时）、display:/ float:/的各种问题position:等等。...这是我们许多人通常通过打开 DevTools 然后selector { background: rgb(0 0 0 / 10%); }在“样式”框中键入 CSS 声明来完成的事情。...切换类您可能希望从 HTML 元素中添加或删除类，以触发新状态或外观更改，也称为切换类。类切换发生在大多数实时网站的幕后，但它也可以在测试期间用于跳过必须满足某些面向用户的条件。...类切换可用于触发外观的更改（例如替代主题或状态）甚至动画，但仅出于测试原因使用开发人员工具执行此操作时可能会有点繁琐（即网站实际上并不能正常运行）用户的方式）。

1.6K1 0

【译】用纯JavaScript写一个简单的MVC App

每次更改，添加，或者删除待办事项时，都会使用模型中的待办事项todos，再次调用displayTodos方法，重置列表并显示它们。这将使得视图和模型的状态保持同步。...，该方法在每次待办事项更改时调用displayTodos。...我们必须将事件监听器放在视图的DOM元素上。我们将响应表单上的submit事件，然后单击click并更改change待办事项列表上的事件。（由于略为复杂，我这里略过"编辑"）。...我们已经在控制器上创建了onTodoListChanged方法来处理此问题，我们只需要使模型知道它就可以了。我们将其绑定到模型上，就像绑定到视图的方式一样。...输入事件是当你键入contenteditable元素时触发事件，而foucesout在你离开contenteditable元素时候触发的事件。

2K1 0

SI持续使用中

与下一行一起打印如果启用，Source Insight将在打印时尝试将文本与下一行保持在同一页面上。...实际上，每个对话框都是相同的。但是，每个对话框都有其自己的持久状态。查找参考输入您要查找的符号名称。光标下的单词将自动加载到此文本框中。...通常，您将在程序中键入标识符的名称，但是您可以在此处键入任何字符串，并且将在项目范围内进行搜索。如果仅键入一个单词，搜索将非常快。搜索范围此下拉列表包含文件类型列表。...如果您选择其他搜索方法，则将匹配项限制为仅整个单词。跳过无效代码如果启用，则仅搜索在条件编译下处于活动状态的代码。...这与键入此表达式具有相同的效果： ? 单词变体应用于每个关键字词。例如，如果您指定：保存写这意味着必须存在“保存”和“写入”。启用单词变体后，此搜索将等效于： ?

3.7K2 0

分享 11 个非常有用的 HTML One-Liners 代码

没有人喜欢 HTML 在不应该的地方断词。使用，您可以轻松地找到可以打断单词的点（机会）。当单词太长并且浏览器很可能在不正确的位置打破它时，这很有用。...最后，使用 p 段落元素编写手风琴的主要内容。 6、内容可编辑 This is a paragraph.... 您可以通过将 contenteditable 属性设置为 true 来使任何内容可编辑。不管是 div 还是 p ，它都会变成可编辑的。...如果您不希望用户能够粘贴到密码等字段，您可以在该输入字段上写上 onpaste="return false" 并且用户将无法粘贴到那里。... 当设置为 true 时，拼写检查属性告诉浏览器必须检查用户在该元素中输入的语法和拼写错误。这是一个方便的属性，可帮助用户编写正确无误的内容。

6922 0

如何在Linux中使用grep命令？

我们可以使用grep搜索文件中的文本模式，另一方面，可以使用find命令在linux OS中搜索文件。除此之外，我们还可以使用grep命令过滤搜索结果以捕获特定的文本字符串、单词或数字。...输出是一组行，每行应具有您使用grep命令键入的特定单词或单词短语。...如果在您所在位置的文件内搜索文本，则可以使用相对路径。但是，如果要在其他位置的文件中搜索文本，则必须使用绝对路径。要搜索单词短语时，请记住使用“”or“”。...紫色：文件名白色：包含我们的关键字（这次是ubuntu）红色：关键字因此，当我们在多个文件中进行搜索时，通常grep命令会提供类似的输出。我们可以根据需要更改此输出，必须使用选项来做到这一点。...选项3：使用-l仅列出包含我们关键字的文件 ? 实际上，当我们在整个文件系统中搜索关键字时，上面的选项（-l）非常有用。在简要讨论-l选项之前，我先介绍另一个选项。

3K4 1

h5新增小功能

//在原来的类名基础上添加类名active testNode.classList.remove('active') //移除active testNode.classList.toggle('active...') //存在active则删除不存在则添加自定义属性操作我们一般在html标签键入一些自定义属性方便操作由于自定义属性没有property与之对应，...我们不能直接操作 //错误的操作 div.flag=0 正确的操作 div.setAttribute('flag','0') h5为我们提供了更加便利的方式 //在原来的自定义属性添加前缀 `data-...` 直接操作dataset div.dataset.flag=0 可编辑属性在之前非表单元素是无法编辑的而h5为我们提供了 contenteditable...="true"使得元素可以被编辑 123

2461 0

使用 Linux 自动化工具提高生产率

请不要勾选“ 在键入单词的一部分时触发(Trigger when typed as part of a word)”，这样，如果你键入包含 “grep”的单词（例如 “fingerprint”），就不会尝试将其转换为...仅当将 “grep” 作为独立的单词键入时，此功能才有效。...image.png 在 AutoKey 中设置缩写限制对特定应用程序的更正你可能希望仅在某些应用程序（例如终端窗口）中打字排版错误时才应用校正。...这些名称空间是静态的，因此它们是键入特定命令时 AutoKey 可以为我插入的理想短语。...这是我设置的一个小脚本，该脚本进入 Tmux 的复制模式，以将前一行中的第一个单词复制到粘贴缓冲区中： from time import sleep # 发送 Tmux 命令前缀（b 更改为 s） keyboard.send_keys

2.1K3 0

深入了解Linux中的history

在 Linux 中，有一个非常有用的命令可以向你显示最近使用过的所有最后命令。该命令简称为history。显示时间戳通常当你从命令行键入历史记录时，它会显示命令# 和命令。...当你已经执行了一个很长的命令时，你可以简单地使用关键字搜索历史记录并重新执行相同的命令，而无需完全键入它。按 Control+R 并键入关键字。...当你看到你的命令时按回车键，这将执行历史记录中的命令。在以下示例中，我搜索了host，它显示cat /etc/hosts了历史记录中包含单词的上一个命令host。...按 Control+P 会显示上一条命令，按回车键执行。执行历史记录中的特定命令在下面的例子中，如果你想重复命令#4，你可以做 !4 如下所示。...当你执行命令时，你可以通过设置HISTCONTROL为ignorespaceAND 在命令前键入一个空格来指示历史记录忽略该命令，如下所示。

8013 0

前端富文本基础及实现

前端富文本基础及实现 https://www.zoo.team/article/rich-text 前言在日常生活中我们会经常接触到各种各样的文档格式和形式，其中富文本在文档格式中扮演了重要角色。...效果如图：元素设置 contenteditable 第二种方式是使用 contenteditable 属性指定 HTML 文档中的元素。该方式是 IE 最早实现的。...使用方式是在一个元素上添加 contenteditable 属性并设置为 true，然后该元素会立即被用户编辑。...富文件选区富文本编辑中我们在进行编辑时首先会先选择一块文本区域（即选区），比如选择一段文字并进行字体加粗等操作，那么选区本身包含了哪些信息呢，下面为大家简单介绍一下。...不同浏览器支持的命令也不一样。下方标列出了最常用的命令。命令作用可选值 backColor 设置文档背景颜色。在 styleWithCss 模式下，则只影响容器元素的背景颜色。

4.2K5 0

最新最全自己动手做一个富文本编辑器(附源码 api)

我们来用大白话说一下富文本编辑器原理将一个div设置属性 contenteditable="true" 设置加粗,加横线,放大字体等效果使用 document.execCommand('bold...命令: backColor: 修改文档的背景颜色。在styleWithCss模式下，则只影响容器元素的背景颜色。这需要一个类型的字符串值作为参数传入。...(IE浏览器不支持) defaultParagraphSeparator: 更改在可编辑文本区域中创建新段落时使用的段落分隔符。有关更多详细信息，请参阅标记生成的差异。...(IE 和 Safari不支持) hiliteColor: 更改选择或插入点的背景颜色。需要一个颜色值字符串作为值参数传递。 UseCSS 必须开启此功能。...注: 这个属性是逻辑上的倒退 (例如. use false to use CSS, true to use HTML).(IE不支持) 该属性已经废弃，使用 styleWithCSS 代替。

2.4K2 0

分享 15 个 HTML 新特性，大多数人可能不知道，建议尽早使用上

1、内容可编辑属性 contenteditable 是可以在元素上设置以使内容可编辑的属性。它适用于 DIV、P、UL 等元素。...您需要这样设置它。... Earth 616 superheroes 1....默认情况下，小部件是折叠的。打开时，它会展开并显示其中的内容。标签与一起使用实现一个可以折叠打开标题及详情内容。...一个简单的颜色选择器。

5683 0

MutationObserver对象

subtree：表示是否将该观察器应用于该节点的所有后代节点。 attributeOldValue：表示观察attributes变动时，是否需要记录变动前的属性值。...characterDataOldValue：表示观察characterData变动时，是否需要记录变动前的值。...attributeFilter：表示需要观察的特定属性，比如["class","src"]。...DOM更改的列表，使变更队列保持为空。...此方法最常见的使用场景是在断开观察者之前立即获取所有未处理的更改记录，以便在停止观察者时可以处理任何未处理的更改。

4662 0

分享 24 个鲜为人知的 HTML 属性，助你提升开发效率

要允许特定媒体类型的所有文件，请使用 accept="image/*"。 2、Autofocus 它表明特定元素应该专注于页面加载。... This text can be edited by the user. 10、Readonly 指定输入字段是只读的。...Myy spellinng is checkd 通常，不会检查所有不可编辑的元素，即使 spellcheck...17、Controls 指定是否应在播放器上显示音频/视频控件。... 20、Cite 指向内容的来源、更改或删除的参考点。

7531 0

Linux操作系统，详解5个常用Linux终端命令

sudo apt-get intall vlc 该命令中存在拼写错误，为了使该命令起作用，需要更改intall才能进行安装。想象一下，光标在该行的末尾。...中打开了一个文件，如下所示: sudo nano aa 在文件中键入文本的过程中，您意识到希望在终端中键入另一个命令，但是您不能这样做，因为您在前台模式下打开了nano。...现在当您按下CTRL+Z时，前台应用程序将暂停，将返回到命令行。然后，您可以运行任何您喜欢的命令，完成后，再通过在终端窗口中输入fg并按回车键回到您之前暂停的会话。...4、在特定时间运行Linux命令通过Linux终端使用at命令调度任务，假设您要在特定的时间点运行同一命令。使用at命令可以做到这一点。...5、使用htop查看和管理进程你用哪个命令找出电脑上正在运行的进程的呢？通常是使用‘ps’命令并在其后加不同的参数来得到你所想要的不同输出。不过我建议你安装htop吧。

1.4K2 0

【新！超详细】Figma组件属性完全指南

当您想在另一个组件中交换组件时使用它。例如，当您有一个按钮时，您可以通过属性面板更改按钮内部的图标。目前，无法交换变体。...您可以在批量操作中更改文本：假设您在五个按钮中输入了一个错误，并希望为所有五个按钮修复此错误。您可以选择所有五个并在属性面板中编辑文本。只需键入一次，所有文本图层都会更改。...例如，如果要创建悬停按钮，请将其颜色从启用更改为悬停，并将其命名为悬停。您现在有一个包含两个变体的变体组件集。如何在 Figma 中编辑属性？...单击详细信息图标，然后在窗口中更改名称。更改列表中的变体顺序当您单击一个实例并想要更改变体时，您希望它按字母顺序排列，或者最流行的变体在顶部。在变体行上，单击详细信息图标。...为了克服它，您可以在布尔属性中写入单词“Icon”之前添加单词“Show”。一个老派的技巧是在其中一个属性中的“图标”一词之后添加一个空格。因此，布尔值和交换值将具有相同的属性名称。

10.9K2 2

10个好用的 HTML5 特性

内容可编辑 contenteditable是可以在元素上设置以使内容可编辑的属性。它适用于DIV，P，UL等元素。...注意，当在元素上没有设置contenteditable属性时，它将从其父元素继承该属性。... Shoppping List(Content Editable) ...技巧可以使用css更改高亮颜色: mark { background-color: green; color: #FFFFFF; } ?...*[A-Z]).{6,20}$" autofocus required> Color picker 一个简单的颜色选择器。

7651 1

10个好用的 HTML5 特性

这是一个示例https://github.com/atapas/notifyme#properties 内容可编辑 contenteditable是可以在元素上设置以使内容可编辑的属性。...注意，当在元素上没有设置contenteditable属性时，它将从其父元素继承该属性。... Shoppping List(Content Editable) ... 运行结果：技巧可以使用css更改高亮颜色: mark { background-color: green; color: #FFFFFF; } data-* 属性 data-*...可以在 JavaScript 代码中使用存储的数据来创建更多的用户体验。

9822 0

Google 搜索的即时自动补全功能究竟是如何“工作”的？

谷歌搜索的自动补全功能对于使用移动设备的用户来说特别有用，用户可以轻松在难以键入的小屏幕上完成搜索。当然，对于移动设备用户和台式机用户而言，这都节省了大量的时间。...当然，这也与我们当前所处的位置以及我们的搜索历史相关。另外，这些“预测”也会随着我们键入的关键字的变更而更改。...例如，当我们把键入的关键字从 juej 更改为 juex 时，与“掘金”相关的预测会“消失”，同时，与“觉醒”、“决心”相关联的词会出现。 ? 为什么我们看不到某些联想词？...通常，满足特定前缀的词汇可能很多，而用户界面上能够显示的却不多，我们更希望能显示最常搜索或者最有价值的词汇。...•对于排序后的词汇表来说，在词汇表每个元素上增加 weight 属性并不难；•对于前缀树来说，将 weight 存储在叶子节点中，也是很简单的一个实现；•对于 DFA 来说，则较为复杂。

2.3K1 0

还在为选择办公软件而烦恼吗?不妨试试ONLYofficeV8.0

,更改环绕样式,填充颜色或图案等,创建专业外观和表单模板,使用钢笔或荧光笔等工具自行手绘图形 5.深入分析文本分析用户的文档:查看包含或不包含空格的字数,段落或字符.搜索单词或短语,使用查找并替换功能将其替换为新单词或短语....查看版本历史记录,只需单击即可选择和恢复任何以前的版本. 6.改善团队工作流程与您的团队在线协作处理文档：选择适合的共同编辑模式——在键入时快速显示所有更改，或者仅严格显示保存后的更改。...5.增强团队协作与您的团队协作处理业务报告和库存记录。访问、分享电子表格，并链接至特定区域；实时共同编辑；在单元格上留下评论；与协作者在线聊天。进行这些操作时您完全无需离开编辑器。...将任意数量的对象分组并批量设置应用，从而节省您的时间。 2.紧跟用户的创意使用钢笔或荧光笔工具在幻灯片中创建手绘图形，还可选择所需的颜色与线条粗细。...路径：“文件”选项卡 -> 保护 ->添加密码 6.从“开始”菜单快速创建文档在 Windows 上使用 ONLYOFFICE 桌面编辑器时，现在用户无需单击桌面上的应用程序图标即可创建新的文档、表单模板

1201 0

富文本编辑器开发简介

contenteditable='true'设置元素和它包含的元素可以编辑。...* 区分contenteditable和contentEditable。contenteditable是元素的特性，而contentEditable是对象的属性。...* 因为浏览器兼容性问题，第二个参数要为false，firefox在该参数为true时抛出错误。...实际上，这样会移除选区，因为选区中至少要有一个范围 reomveRange(range)：从选区中移除指定的DOM范围 selectAllChildren(node)：清除选区并选择指定节点的所有子节点...anchorOffset：“起点”在anchorNode中的偏移量。 focusNode：返回包含“结束点”的节点。 focusOffset：“结束点”在focusNode中的偏移量。

4.1K2 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭