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

如何在不使用jQuery的情况下围绕文本部分包装范围

在不使用jQuery的情况下,您可以使用原生JavaScript来实现围绕文本部分包装范围。以下是一个简单的示例:

代码语言:javascript
复制
function wrapText(text, wrapper) {
  const regex = new RegExp(text, "g");
  const wrappedText = wrapper.replace("$1", text);
  return wrappedText;
}

const text = "这是一个文本部分";
const wrapper = "<span class='highlight'>$1</span>";

const wrappedText = wrapText(text, wrapper);

document.body.innerHTML = wrappedText;

在这个示例中,我们定义了一个名为wrapText的函数,它接受两个参数:要包装的文本和包装元素。我们使用正则表达式来查找文本,并使用replace方法将其替换为包装元素。在这个例子中,我们使用<span>元素来包装文本,并为其添加了一个名为highlight的类。

要在页面上应用这个函数,只需将要包装的文本和包装元素传递给函数,然后将返回的包装文本插入到页面中即可。

请注意,这个示例仅适用于简单的文本包装。如果您需要处理更复杂的文本或HTML结构,您可能需要使用更高级的方法,例如遍历DOM节点或使用第三方库。

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

相关·内容

一个小时学会jQuery

2.4、jQuery对象转换成DOM对象 DOM对象是jQuery对象组成部分jQuery对象是对DOM对象包装升级,每一个jQuery对象都是一个集合,是一个包装集,每个包装集中可以包含0到N个...我们使用术语jQuery包装器或者包装集(wrapped set),来指能够在其上用jQuery定义方法去操作、匹配元素集合。...hello')") //包含hello文本节点 $("td:empty") //包含子节点或者文本空节点 $("div:has(p)") //含有选择器所匹配节点 $("td:parent...isLocal   map 默认: 取决于当前位置协议 允许当前环境被认定为“本地”,(文件系统),即使jQuery默认情况下不会承认它。...注意:其它 HTTP 请求方法, PUT 和 DELETE 也可以使用,但仅部分浏览器支持。 url   String (默认: 当前页地址) 发送请求地址。

18.5K71

JavaScript立即执行函数(IIFE)使用

1.传统方法啰嗦,定义和执行分开写; 2.传统方法直接污染全局命名空间(浏览器里 global 对象, window) 函数范围与块范围界定 使用var关键字声明局部变量作用域为封闭函数。...foo; // ReferenceError: foo is not defined 现在论点是,不使用IIFE,我们可以使用范围变量来获得相同结果。...在这种情况下,您将不得不求助于经典函数范围。 闭包和私人数据 IIFE另一个用例是围绕由IIFE返回函数访问局部变量提供包装范围。...变量重命名 有时,你可能碰到一种情况,你正在使用两个不同库暴露全局变量名是相同。例如,考虑一下你正在使用jQuery同时另一个库也指定了一个为$全局变量。...由于在写通用JavaScript代码时,你肯定不想硬编码这两个名字其中任何一个,这时你就可以使用一种”包装方式就像下面这样: (function(global) { // ... }

2.4K20
  • jQuery对象

    它可能包含文本和/或其他DOM元素。DOM元件由类型描述,,,或,和任何数量属性src,href,class等。有关更全面的描述,请参阅W3C官方DOM规范。..."; 这在许多情况下起作用,但在大多数版本Internet Explorer中都会失败。在这种情况下,推荐方法是使用纯DOM方法。...这意味着它有DOM属性,.innerHTML等方法.appendChild(),但不是 jQuery方法,.html()或.after()。...链接不是所有的jQuery对象都被创建=== 关于这种“包装”行为一个重要细节是每个包装对象是唯一。即使使用相同选择器创建对象或包含对完全相同DOM元素引用,这一点也是如此。...jQuery对象包装这些元素,以平滑这种体验,使常见任务变得容易。当使用jQuery创建或选择元素时,结果将始终包含在一个新jQuery对象中。

    1.1K10

    Web前端学习笔记之jQuery选择器

    JQuery提供函数首先要构造JQuery包装集,通过$()返回即是JQuery包装集。...var text11_jquery=$("#text11"); 2.JQuery包装集与DOM对象互相转换 1.DOM对象不能使用JQuery属性方法,但DOM对象可以通过$()转换成JQuery包装集...var text11_dom=document.getElementById("text11"); var text11_jquery=$(text11_dom); 2.JQuery包装集可以使用部分...DOM对象属性方法.length,但也有个别属性方法不能使用.value,可以通过在JQuery包装集后面加中括号及索引值获取对应DOM对象 var text11_dom=$("#text11")...; }); 4.JQuery(selector[,context]):在指定范围内查找符合条件JQuery包装集,context为查找范围,context可以是DOM对象集也可以是JQuery包装

    1.3K10

    jQuery(一)

    / 不过目前处于更新状态,推荐使用内部插件,因为很可能没有作者维护了。...并且已经处于自读方式,推荐使用,推荐使用npm方式,使用jquery相关插件 jquery官方推荐图书 https://www.packtpub.com/web-development/learning-jquery-fourth-edition...即 $(document) 或 $(this) 使用这种方法可以完成对节点操作 第三种 传递字符串文本给$()方法,jQuery将会根据传入文本创建好HTML元素,然后将其封装为jQuery对象返回...ps 在这种情况下,不能使用文本,因为jQuery会将纯文本当成选择器解析。...(由于时间问题,规定吸取了jquery部分),都为将对象属性每次传入回调函数 一个栗子 $('div').each(() => { // 选择div元素 if ($(this).is(':hidden

    2.1K40

    jQuery.dotdotdot多行文本省略号插件使用方法

    最近在做一个自适应网站,经常遇到需要文本溢出地方,我写了一个CSS简单设置文本溢出方法:用css实现文本溢出div显示省略号 但是IE只能设置单行溢出隐藏,Webkit内核浏览器才支持多行溢出,于是找到了这款插件...什么是dotdotdot Dotdotdot是一款截断网页多行内容jQuery插件,当前文本超出范围自动显示省略号。 该插件可以在省略号之后,内容结尾处添加“More/更多”锚点。...如何使用插件 首先,在页面中引入 nessesary .js 文件(需要jquery支持)。...*/         API.watch();         /* 开始监视包装器或窗口宽度和高度。 ...*/         API.unwatch();         /* 停止监视包装器或窗口宽度和高度。 */     }) 简单页面演示代码: <!

    2.4K01

    Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(十四)在项目中使用 jQuery

    Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(十四)在项目中使用 jQuery 前情回顾 在上一篇博文中,我们讲到了,如何在 vue 项目中 使用百度 UEditor...富文本编辑器,详情点击《Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(十三)集成 UEditor 百度富文本编辑器》。...相信大家对引用这种非 npm 包有了一定认识。 很多人学习 js 都是从 jQuery 开始,我也例外。...有时候进行一些操作时候,还是感觉 jQuery 比较好用,那么,我们如何在项目中使用 jQuery 呢?这篇博文带你实践。...我建议是,一般不使用 jQuery,如果使用的话,请确保在可控范围内。否则,你算是给项目埋大坑了。

    1K70

    文本太长,Transformer用不了怎么办

    在整个文档上,这种局部注意力只会带来一部分计算和内存注意力成本。窗口方法也导致了更紧凑填充文档小批量包装,节省存储空间。使用一个学习过饱和函数和一个两阶段池策略来识别文档相关区域。...该模型检索质量显著提高,在计算和内存成本适度增加情况下对较长文档检索性能提高。 本文模型以一个长文档和一个查询作为输入,从文档中提取一个文本作为答案。...最先进模型(BERT)倾向于使用一堆transformer层,这些层是从大量未标记语言语料库中预先训练出来,用于编码查询和文档联合上下文信息。...但是,这些transformer模型只能接受固定长度(512)文本作为输入。为了处理更长文本输入,以前方法通常将它们分成等距片段,并基于每个片段独立地预测答案,而不考虑其他片段信息。...虽然ROUGE是一个有效评估框架工作,在一致性或覆盖范围细微差别,并没有捕捉到它。

    1.8K40

    jQuery已“死”?为清除技术债,我们删掉了前端所有jQuery依赖

    JQuery 提供了一个可以在大多数浏览器上工作 API,这在当时使用 JavaScript 是很难实现。...Micha Gobiowski-Owczarek 也明确表示,为了不与浏览器冲突,jQuery 不会修改原生原型,而是用 jQuery 包装器对象包装 DOM 节点,每个操作都会创建一个新包装器对象。...大多数情况下,这并不重要,但对于具有大量 DOM 操作、非常复杂应用程序来说,可能会成为一个问题。...未来很长一段时间里,jQuery 还继续会是 WordPress 部分,因为它很难在破坏向后兼容性情况下将它删除。...但一些改变已经发生, WordPress 创建 Gutenberg 编辑器不依赖于 jQuery

    78530

    ASP.NET MVC 5 - 给数据模型添加校验器

    您可以在一个地方 (模型类) 中以声明方式指定验证规则,这个规则会在应用程序中任何地方执行。 让我们看看您如何在本电影应用程序中,使用此验证支持。...在上面的代码中,流派(Genre)和等级(Rating)只能使用字母(空格,数字和特殊字符是不允许)。该范围(Range )属性约束值在一个指定范围内。...注意,为了使jQuery支持使用逗号非英语区域验证 ,需要设置逗号(",")来表示小数点,本教程前面所述, 你须引入NuGet globalize。...请注意,表单在每一个相应验证错误消息旁边,已经自动使用红色边框颜色突出显示文本框指明无效数据。...· 默认情况下,浏览器就会使用基于语言环境(locale)正确格式呈现数据。

    9K70

    学习zepto.js(Hello World)

    $():   与jQuery$()几乎一样,但zepto选择器是直接使用原生querySelectorAll(),所以,一些jQuery自定义选择器是不支持,但可以添加selector.js...标签*//*以上为作为选择器使用方法*/ $(function(){ //do...用过jQuery应该都知道,这是绑定DOMContentLoaded 事件 })   当$变量已经存在时,引用了...,基本上属于将基本类型包装为zepto对象操作了。...但有一点令我不理解地方是,为何在最后又添加了这么一段重复逻辑,还希望有知道同学告诉在下。 ? 最后返回一个变量经过Zepto构造函数摇身一变为Zepto对象。...方法,该选择器包含子选择器并且选择器开头是个#号,这说明人家要是个ID:XXX标签       如果满足这种情况,就调用getElementById并将返回结果放入一个数组,这也是为什么获得jQuery

    3.5K80

    JavaScript资源大全中文版(Awesome最新版)

    JSLint - 高标准,严格和认真的代码质量工具,旨在保持语言很好部分。...joyride -jQuery功能导览插件。 focusable - 将聚焦点放在DOM元素上,将叠加层添加到页面的其余部分。...fancyInput - 使用CSS3效果在输入字段中打字。 jQuery-Tags-Input -使用这个jQuery插件将简单文本输入法转换成酷标签列表。...Menu菜单 jQuery-menu-aim - jQuery插件在用户光标位于特定下拉菜单项时触发事件。 用于制作响应式大型下拉菜单,亚马逊。...Packery - 使用二进制包装算法网格布局库。 适用于可拖动布局。 Isotope - 一个可过滤,可排序网格布局库。 可以实施砖石,包装和其他布局。

    15.2K112

    为啥过时 jQuery 仍然是市场占有率最高 JS 库?

    而且,在未来很长一段时间,jQuery 还继续会是 WordPress 部分,因为它很难在破坏向后兼容性情况下将它删除。...Resig 还在2006 年 6 月一篇帖子中指出了 JavaScript 开发者在浏览器上遇到一些问题: JavaScript 中存在许多问题(其中大部分源于浏览器兼容),任何稍微复杂一点应用程序都需要处理诸如规范化事件处理...因此他们用户不再需要如此频繁地直接修改或者访问 DOM,并且通常也鼓励这样做。在这样环境下,使用 jQuery 没有多大意义。但这只是整个网络生态系统一小部分。...其中之一是为了不与浏览器冲突,jQuery 不会修改原生原型 — 就像其他一些库所做那样(通常后来导致冲突 API 标准化问题)— 而是用 jQuery 包装器对象包装 DOM 节点。...每个操作都会创建一个新这种包装器对象,在大多数情况下,这并不重要,但对于具有大量 DOM 操作非常复杂应用程序,这可能会成为一个问题。

    1.6K30

    Asp.Net MVC4入门指南(8):给数据模型添加校验器

    您可以在一个地方 (模型类) 中以声明方式指定验证规则,这个规则会在应用程序中任何地方执行。 让我们看看您如何在本电影应用程序中,使用此验证支持。...; 注意,该命名空间包含System.Web。...注意,为了使jQuery支持使用逗号非英语区域验证 ,需要设置逗号(",")来表示小数点,你需要引入globalize.js并且你还需要具体指定cultures/globalize.cultures.js...您可能已经注意到了Title 和Genre属性,在字段中输入文本或者删除文本,是不会执行所需验证属性,直到您提交表单 (点Create按钮)时才执行。...您不必担心不符合规则 ,验证逻辑会在应用程序不同部分执行——在一个地方定义验证逻辑将会被使用到各个地方。这使代码非常干净,并使它易于维护和扩展。它意味着您会完全遵守DRY原则。

    4.6K100

    JQuery选择器(中)

    5.临近选择器: $("mix+mix"),选取下一个兄弟节点.:$("div +#test"),id为test节点必须是div下一个兄弟节点..../p"):所有div节点父节点下p标签 还有相对路径写法以及支持Axis选择器,还不是会应用,介绍了...已经一大堆了 $其他用法: $(html节点):根据提供原始HTML标记字符串,动态创建由...jQuery对象包装DOM元素.: $("Hello").appendTo("#body");//把Hello添加到body元素中...):查询指定XML文档中所有div元素 选择器来源可以是:作为上下文DOM元素,文档或jQuery对象 还有两个:$.extend(prop)和$.noConflict()是和插件以及和其他库兼容使用...,以后再写 jQuery其他core部分: eq(数字):将匹配元素集合缩减为一个元素。

    2K90

    与Ajax同样重要jQuery(1)

    = document.getElementById("mydiv"); // 获得DOM对象 domObject.innerHTML = "ITCAST"; // 通过包装DOM对象,成为jQuery...DOM对象属性方法,DOM对象也无法使用jQuery对象属性方法。...但是我们可以使用jQuery提供方法,将DOM对象通过jQuery()函数包装成为jQuery对象,同样我们可以把jQuery对象转化成DOM对象。...('John')") 文本内容含有john 所有div :empty 选取包含子元素或者文本节点空元素 $("td:empty") td元素必须为空 :has(selector) 选取含有选择器所匹配元素元素...² 设置含有文本内容 ”传智播客” div 字体颜色为红色 ² 设置没有子元素div元素 文本内容 ”这是一个空DIV“ ² 设置包含p元素 div 背景色为黄色 ² 设置所有含有子元素

    10K60
    领券