首页
学习
活动
专区
工具
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、innerTexttextContent和value属性

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

3.7K70
  • 【译】用JavaScript写一个简单MVC App

    我想使用model-view-controller体系结构模式并用JavaScript编写一个简单应用程序。所以我着手做了,下面就是。...初始化设置 这将是一个完全JavaScript应用程序,这就意味着所有的内容将通过JavaScript处理,而HTML在主体中仅包含一个根元素。 <!...由于我们在没有ReactJSX模版语言情况下使用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 因为绑定是设置元素innerTexttextContent (而不是innerHTML),所以它是安全,没有HTML或者脚本注入风险。

    2.1K10

    前端富文本基础及实现

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

    4.5K50

    JavaScript理解记录(5)

    ,Text,这三个也是Node其中几个子类;  2、文档元素选取:返回值是ElementElement组成数组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

    DOM、BOM一些兼容性问题

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

    1.6K20

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

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

    1.1K30

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

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

    57130

    再谈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时会同时返回idname与给定值相同元素。...IE9matches函数不能处理不在DOM树上元素 只要元素不在dom树上,一定会返回false,实在不行把元素丢在body里面匹配完了再删掉吧,当然了我们可以自己写匹配函数以避免回流。

    96340

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

    () 一个参数:元素标签名 getElementsByName() 一个参数:name属性名 getElementsByClassName() 一个参数:包含一个多个类名字符串 querySelector...hasChildNodes() 包含一个多个节点时返回true contains() 如果是后代节点返回true isEqualNode() 两个节点引用是同一个对象:传入节点与引用节点引用为同一个对象返回..."") DOM内容操作 文本节点TEXT innerText 所有的文本内容,包括子标签中文本 outerText 与innerText类似 innerHTML 所有子节点(包括元素、注释和文本节点...) outerHTML 返回自身节点与所有子节点 textContentinnerText类似,返回内容带样式 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

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

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

    2.5K30

    移除jQuery好像没那么难

    为了节省大家时间,我编写了这个实用参考指南,列出了一些最常见 jQuery 模式及其在 JavaScript等价物。我们将涵盖如何从这些概念和函数迁移到 JavaScript。...在 JavaScript 中,$() jQuery() 等价物是 querySelector() querySelectorAll(),它们同样可以使用 CSS 选择器。...或者选择所有 .box 实例 document.querySelectorAll(".box"); 在选择中所有元素上运行函数 querySelectorAll() 返回一个包含所有匹配查询元素...与 jQuery 可以直接对选择所有元素调用方法不同,在 JavaScript 中,你需要使用 NodeList.forEach() 遍历这个 NodeList。...); element.appendChild(text); 更新 DOM 如果要更改元素文本向 DOM 中添加新元素,可以使用 textContent 属性来读取更新文本内容: // 使用 jQuery

    12910

    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、innerTexttextContent    innerTexttextContent区别,当文本为空时,innerText是"",而textContent是undefined

    53521
    领券