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

使用纯Javascript突出显示包含其他元素的元素的textContent或innerText,该元素也基于用户的searchedWords

要使用纯Javascript突出显示包含其他元素的元素的textContent或innerText,可以通过以下步骤实现:

  1. 获取要搜索的关键词(searchedWords)和包含该关键词的元素的父元素(parentElement)。
  2. 遍历父元素的所有子元素,判断子元素的textContent或innerText是否包含关键词。
  3. 如果包含关键词,可以使用HTML的<span>标签或其他合适的标签来包裹关键词,并设置相应的样式来突出显示。
  4. 替换原始的textContent或innerText为包含突出显示的HTML代码。
  5. 如果需要多次突出显示不同的关键词,可以将上述步骤封装为一个函数,并传入不同的关键词和父元素进行调用。

以下是一个示例代码:

代码语言:txt
复制
function highlightKeywords(searchedWords, parentElement) {
  const elements = parentElement.getElementsByTagName('*');
  
  for (let i = 0; i < elements.length; i++) {
    const element = elements[i];
    const text = element.textContent || element.innerText;
    
    if (text.includes(searchedWords)) {
      const highlightedText = text.replace(new RegExp(searchedWords, 'gi'), '<span class="highlighted">$&</span>');
      element.innerHTML = highlightedText;
    }
  }
}

// 调用示例
const parentElement = document.getElementById('parentElement');
const searchedWords = '关键词';
highlightKeywords(searchedWords, parentElement);

在上述示例中,我们使用了正则表达式来进行全局匹配(g)和不区分大小写匹配(i),以确保突出显示所有匹配的关键词。同时,我们使用了<span class="highlighted">标签来包裹关键词,并为其添加了一个名为"highlighted"的CSS类,你可以根据需要自定义该类的样式。

请注意,上述示例中没有提及任何特定的云计算品牌商或产品,因为这与问题的要求相符。如果你需要推荐腾讯云相关产品来支持云计算领域的开发工作,你可以在回答中提供相关产品的名称和简介,并附上腾讯云官方网站的链接供读者进一步了解。

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

相关·内容

JS魔法堂:被玩坏的innerHTML、innerText、textContent和value属性

,一般情况下我们可以使用textContent来代替,但它两者是否就能完全等同呢?...HTML实体(ASCII实体、符号实体和字符实体)的实体名或实体编号;              2. 符号实体和字符实体对应的字符;              3....对HTML标签是剔除不是解析,也不会出现CSS解析和渲染的处理,因此等元素是不生效的。             b)....line5 " 四、表单元素中的innerHTML、innerText、textContent和value      到这里大家应该对innerHTML、innerText和textContent...在通过value属性赋值后,则value的取值与innerText无关。        c). textContent可被设置且生效,对其他属性的影响:      1.

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

    我想使用model-view-controller体系结构模式并用纯JavaScript编写一个简单的应用程序。所以我着手做了,下面就是。...初始化设置 这将是一个完全的JavaScript的应用程序,这就意味着所有的内容将通过JavaScript处理,而HTML在主体中仅包含一个根元素。 的JSX或模版语言的情况下使用纯JavaScript进行此操作的,因此它有些冗长和丑陋,但是这就是直接操作DOM的本质。...我想简化它,不需要编辑按钮,用输入框input或其他来代替span。我们也不想每次输入时都调用editTodo,因为它将渲染整个待办事项列表UI。...使用纯JavaScript的无依赖待办事项应用程序,演示了模型-视图-控制器结构的概念。下面再次放出完整案例和源码地址。

    2K10

    Knockout.Js官网学习(text绑定)

    前言 text 绑定到DOM元素上,使得该元素显示的文本值为你绑定的参数。该绑定在显示或者上非常有用,但是你可以用在任何元素上。...; ko.applyBindings(viewModel);     KO将参数值会设置在元素的innerText (IE)或textContent(Firefox和其它相似浏览器...原来的文本将会被覆盖。     如果参数是监控属性observable的,那元素的text文本将根据参数值的变化而更新,如果不是,那元素的text文本将只设置一次并且以后不在更新。    ...如果你传的是不是数字或者字符串(例如一个对象或者数组),那显示的文本将是yourParameter.toString()的等价内容。...关于HTML encoding 因为该绑定是设置元素的innerText或textContent (而不是innerHTML),所以它是安全的,没有HTML或者脚本注入的风险。

    2.1K10

    前端富文本基础及实现

    什么是富文本 纯文本就是用纯文字编辑器编写,输入什么就是什么的文档,只包含字符。...该方式是 IE 最早实现的。使用方式是在一个元素上添加 contenteditable 属性并设置为 true,然后该元素会立即被用户编辑。...Selection 对象表示用户选择的文本范围或插入符号的当前位置。它代表页面中的文本选区,可能横跨多个元素。文本选区由用户拖拽鼠标经过文字而产生。...document 提供了 execCommand() 方法,该方法会影响使用 designMode 或 contentEditable 属性实现可编辑区域的元素。...该方法执行后,会返回 boolean 值,如果是 false,表示操作不被支持或未被启用。 不同浏览器支持的命令也不一样。下方标列出了最常用的命令。

    4.6K50

    JavaScript的理解记录(5)

    ,Text,这三个也是Node的其中几个子类;  2、文档元素的选取:返回值是Element或Element组成的数组NodeList;...:.success 4、基于属性值:input[name='button']; 5、组合使用:span.fatal.error //其class中包含fatal和error的所元素;    ...浏览器不支持)          textContent: 返回纯文本;IE不支持          innerText:也是返回纯文本,但不返回元素的内容;FireFox不支持;...第二个参数是该父节点的子节点,可以为null,为null是功能与appendChild相同;                如果使用以上两个方法再次插入已经存在的节点,已存在节点将会自动从它的当前位置删除并在新的位置从新插入...         其二:设置对应元素的JavaScript contenteditable属性;         浏览器定义了多项文本编辑命令,为了执行这些命令,应该使用Document

    1.4K20

    JavaScript离别之作——HTML元素操作

    希望大家能认真对待,其他的我也不啰嗦了,最后祝愿大家今后事业顺心,阖家欢乐。 话不多说,直接开整!...querySelector()方法用于返回文档中匹配到指定的元素或CSS选择器的第1个对象的引用。 querySelectorAll()方法用于返回文档中匹配到指定的元素或CSS选择器的对象集合。...innerHTML在使用时会保持编写的格式以及标签样式。 innerText则是去掉所有格式以及标签的纯文本内容。 textContent属性在去掉标签后会保留文本格式。 举个例子 代码实现 <!...); console.log(box.textContent); 注意 innerText属性在使用时可能会出现浏览器兼容的问题。...因此,推荐在 开发时尽可能的使用innerHTML获取或设置元素的文本内容。

    1.1K30

    DOM、BOM一些兼容性问题

    但是在一些项目中,可能仍需要考虑到兼容性,如果兼容到 IE8 已经是很兼容了,毕竟该浏览器也几乎没多少市场份额了。多是一些机构或政府部门在使用。...textContent 和 innerText 功能很相似,但又有一些不同,具体不同大致有这些: innerText 不返回 元素里的内容,而且他还会忽略多余的空白,并试图保留表格格式...实现一个 textContent 在 IE8 及其以下版本,该属性是没有的,而 innerText 属性是存在的。可以利用 innerText 来实现。 if(!...element.getBoundingClientRect() 该方法会返回一个只读的对象,这个对象包含元素的几个几何尺寸: ?...window.getComputedStyle() 这个方法返回一个对象,该对象在应用活动样式表并解析这些值可能包含的任何基本计算后报告元素的所有CSS属性的值。

    1.6K20

    探索在网页中使用“标注”

    ,注意,并不包含text-emphasis-position属性,text-emphasis-position属性是独立的!...那能不能“当用户选中文字后在选中文本下方有突出强调、在文本上方出现翻译”呢? (这个笔者在本文先不说,以免造成“长篇大论”,本文只把实现的基础知识全盘托出!)...没错这里就是用的 -webkit-text-emphasis 突出强调符 —— 如果要为某个元素一次添加多个样式,cssText可以优化性能!...★受笔者“信奉”准则的影响,其实在这里一开始还想用纯CSS的 伪类::selection 去做突出强调,但是很不幸的是:这个伪类里面只能改变选中文字的颜色相关:如背景颜色、字体本身颜色。...这里还有一个问题是:在笔者实践过程中发现,ruby标签是没有办法嵌套在行内元素中的:它会带着其内包裹的文字消失不见 !这一点一定注意。 好了,你总不能让用户一直处于这个状态吧。

    57630

    再谈BOM和DOM(5):各个大流浪器DOM和BOM里面的那些坑—兼容性

    value);  //for firefox element.setAttribute(className, value);  //for IE IE:可以使用获取常规属性的方法来获取自定义属性,也可以使用...dataTransfer 对象 | 属性 | 描述 |  | ------------- |:-------------:|  | dropEffect | 设置或获取拖曳操作的类型和要显示的光标类型...|  | effectAllowed | 设置或获取数据传送操作可应用于该对象的源元素 | | 方法 | 描述 |  | ------------- |:-------------:|  | clearData...IE6/7不区分id和nam 在IE6/7下使用getElementById和getElementsByName时会同时返回id或name与给定值相同的元素。...IE9的matches函数不能处理不在DOM树上的元素 只要元素不在dom树上,一定会返回false,实在不行把元素丢在body里面匹配完了再删掉吧,当然了我们也可以自己写匹配函数以避免回流。

    97940

    再谈BOM和DOM(3):DOM节点操作-元素样式修改及DOM内容增删改查

    () 一个参数:元素标签名 getElementsByName() 一个参数:name属性名 getElementsByClassName() 一个参数:包含一个或多个类名的字符串 querySelector...hasChildNodes() 包含一个或多个节点时返回true contains() 如果是后代节点返回true isEqualNode() 两个节点引用的是同一个对象:传入节点与引用节点的引用为同一个对象返回..."") DOM内容操作 文本节点TEXT innerText 所有的纯文本内容,包括子标签中的文本 outerText 与innerText类似 innerHTML 所有子节点(包括元素、注释和文本节点...) outerHTML 返回自身节点与所有子节点 textContent 与innerText类似,返回的内容带样式 data 文本内容 length 文本长度 createTextNode() 创建文本...innerText: 表示起始标签和结束标签之间的文本   innerHTML: 表示元素的所有元素和文本的HTML代码   outerText: 与前者的区别是替换的是整个目标节点,问题返回和innerText

    1.2K20

    用纯 JavaScript 撸一个 MVC 框架

    先决条件 基本的 JavaScript 和 HTML 知识 熟悉最新的 JavaScript 语法 目标 用纯 JavaScript 在浏览器中创建一个 todo 应用程序,并熟悉MVC(和 OOP——...初始设置 这将是一个完全用 JavaScript 写的程序,这意味着一切都将通过 JavaScript 处理,HTML 将只包含根元素。 index.html 该模型仅处理并修改实际数据。它不理解或不知道输入 —— 正在修改它,或输出 —— 最终会显示什么。...每次修改、添加或删除 todo 时,都会使用模型中的 todos 再次调用 displayTodos 方法,重置列表并重新显示它们。这将使视图与模型的状态保持同步。...我们也可以在 constructor 中调用它一次,来显示初始的 todos(如果有的话)。

    3.3K41

    前端架构师之10_JavaScript_DOM

    它们不仅能够使用Node对象的一系列属性和方法完成节点操作。 也可以使用特有的属性和方法完成不同类型节点的操作。...分类 名称 说明 属性 innerHTML 设置或返回元素开始和结束标签之间的HTML 属性 innerText 设置或返回元素中去除所有标签的内容 属性 textContent 设置或者返回指定节点的文本内容...innerHTML在使用时会保持编写的格式以及标签样式。 innerText则是去掉所有格式以及标签的纯文本内容。 textContent属性在去掉标签后会保留文本格式。...innerText属性在使用时可能会出现浏览器兼容的问题。因此,推荐在开发时尽可能的使用innerHTML获取或设置元素的文本内容。...名称 说明 background 设置或返回元素的背景属性 backgroundColor 设置或返回元素的背景色 display 设置或返回元素的显示类型 height 设置或返回元素的高度 left

    10310

    Knockout.Js官网学习(html绑定、css绑定)

    "); 这样Html 的EM标签就会显示于此 ? KO设置该参数值到元素的innerHTML属性上,元素之前的内容将被覆盖。...关于HTML encoding  因为该绑定设置元素的innerHTML,你应该注意不要使用不安全的HTML代码,因为有可能引起脚本注入攻击。...如果你不确信是否安全(比如显示用户输入的内容),那你应该使用text绑定,因为这个绑定只是设置元素的text 值innerText和textContent。...Css绑定  css绑定是添加或删除一个或多个CSS class到DOM元素上。 非常有用,比如当数字变成负数时高亮显示。...你可以使用任何JavaScript表达式或函数作为参数。KO将用它的执行结果来决定是否应用或删除CSS class。

    2.5K30

    javascript之DOM操作

    1、parentNode    获取该节点的父节点         2、childNodes    获取该节点的子节点数组     3、firstChild    获取该节点的第一个子节点...    4、lastChild    获取该节点的最后一个子节点     5、nextSibling    获取该节点的下一个兄弟元素     6、previoursSibling    获取该节点的上一个兄弟元素...8、nodeVlue    Text节点或Comment节点的文本内容     9、nodeName    元素的标签名(如P,SPAN,#text(文本节点),DIV),以大写形式表示     ...注意,以上6个方法连元素节点也算一个节点。...    1、innerText、textContent    innerText与textContent的区别,当文本为空时,innerText是"",而textContent是undefined

    53821
    领券