程序员经验分享-hwhale

仅使用 SPAN 标签将可能以特殊字符开头或结尾且具有公共前缀的搜索短语包装为整个单词

2024-04-21

我有这段代码来突出显示数组中存在的单词，一切正常，只是它没有突出显示包含“.”的单词。

spansR[i].innerHTML = t[i].replace(new RegExp(wordsArray.join("|"),'gi'), function(c) {
                return '<span style="color:red">'+c+'</span>';
            });

我还尝试转义每个单词中的点

 for(var r=0;r<wordsArray.length;r++){
               if(wordsArray[r].includes('.')){
                 wordsArray[r] = wordsArray[r].replace(".", "\\.");
                  wordsArray[r] = '\\b'+wordsArray[r]+'\\b';
              }
           }

我还尝试更改这些替换，但它们都不起作用 "replace(".", "\.")" 、 "replace(".", "\.")" 、 "replace(".", "/ .")" 、 "替换('.','/.')" 、 "替换('.','/.')" 。

这是一个简化的测试用例（我想匹配 'free.' ）

    <!DOCTYPE html>
<html>
<body>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
  var re = "\\bfree\\.\\b";
  var str = "The best things in life are free.";
  var patt = new RegExp(re);
  var res = patt.test(str);
  document.getElementById("demo").innerHTML = res;
}
</script>
</body>
</html>

在 JavaScript 中实现明确的单词边界。

以下是不支持 ECMAScript 2018 及更高版本的 JS 版本：

var t = "Some text... firas and firas. but not firass ... Also, some shop and not shopping";
var wordsArray = ['firas', 'firas.', 'shop'];
wordsArray.sort(function(a, b){
  return b.length - a.length;
});
var regex = new RegExp("(^|\\W)(" + wordsArray.map(function(x) {
  return x.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&')
}).join("|") + ")(?!\\w)",'gi');
console.log( t.replace(regex, '$1<span style="color:red">$2</span>') );

在这里，正则表达式看起来像/(^|\W)(firas\.|firas|shop)(?!\w)/gi, see demo https://regex101.com/r/4sg00q/2. The (^|\W)捕获到第 1 组（$1) 字符串或非单词字符的开头，然后有第二个捕获组来捕获有问题的术语，并且(?!\w)负向先行匹配后面没有紧跟单词字符的位置。

The wordsArray.sort很重要，因为如果没有它，具有相同开头的较短单词可能会在较长单词出现之前“获胜”。

The .replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&')必须在搜索词中转义特殊字符。

支持lookbehinds的JS环境的变体：

let t = "Some text... firas and firas. but not firass ... Also, some shop and not shopping";
let wordsArray = ['firas', 'firas.', 'shop'];
wordsArray.sort((a, b) => b.length - a.length );
let regex = new RegExp(String.raw`(?<!\w)(?:${wordsArray.map(x => x.replace(/[-\/\\^$*+?.()|[\]{}]/g, '\\$&')).join("|")})(?!\w)`,'gi');
console.log( t.replace(regex, '<span style="color:red">$&</span>') );

正则表达式看起来像/(?<!\w)(?:firas\.|firas|shop)(?!\w)/gi, see demo https://regex101.com/r/4sg00q/1. Here, (?<!\w)负lookbehind 匹配前面没有紧接单词字符的位置。这也使得捕获组变得多余，我将其替换为非捕获组，(?:...)，并且替换模式现在仅包含一个占位符，$&，插入整个匹配项。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

regex

仅使用 SPAN 标签将可能以特殊字符开头或结尾且具有公共前缀的搜索短语包装为整个单词 的相关文章

  • Mapbox GL 中的 MaxBounds 和自定义非对称填充

    我有一个 Mapbox GL JS 应用程序 在地图上显示一些小部件 为了确保地图上的任何内容都不会被它们隐藏 我使用以下命令添加了一些填充map setPadding 这是一个不对称的 在我的例子中左边比右边大 它按预期工作 例如fitB

  • 设置双指缩放时精确的滚动位置

    我正在创建一个地图应用程序 它将标记图像放置在画布上并滚动到它 我正在使用浏览器的捏缩放和滚动来放大 缩小地图 然而 我注意到有一些奇怪的行为 我想知道如何解决它 这有点难以解释 但我们开始吧 假设您处于网页的标准缩放级别 无法进一步缩小

  • 此页面上的脚本导致 ie 运行缓慢

    问题就在标题中 IE 行为异常 并说有一个脚本运行缓慢 FF 和 Chrome 没有这个问题 我怎样才能找到问题所在 那个页面有很多JS 手动检查不是一个好主意 EDIT 这是我正在处理的一个项目的页面 但我需要一个工具来查找问题 End

  • API 使用令牌向 odoo 进行身份验证

    我想使用令牌从 Express 应用程序向 Odoo 进行身份验证 我在用odoo xmlrpc https www npmjs com package odoo xmlrpc连接 Odoo 的节点模块 我的快递应用程序 Odoo 要求 A

  • 访问 nuxt 配置文件中的存储

    我想添加通过 Nuxt 静态生成的动态路由 我定义了一个客户端 服务器端存储asyncData方法 我想将这个存储值 一个数组 映射到我的nuxt config js文件使其成为 动态 静态 路线图nuxt generate命令 但如何访问

  • netsh 结果到 PowerShell 对象

    我正在尝试与NETSH https ss64 com nt netsh html来自 PowerShell 我想看到这个命令的结果 例如一个对象 但是netsh返回一个字符串 netsh wlan show hostednetwork Ge

  • C# 和 Javascript SHA256 哈希的代码示例

    我有一个在服务器端运行的 C 算法 它对 Base64 编码的字符串进行哈希处理 byte salt Convert FromBase64String serverSalt Step 1 SHA256Managed sha256 new S

  • 全局传递 xhr onload 函数的值

    在我正在创建的应用程序中 我有以下 XMLHttpRequest 并且我正在尝试传递结果data在 的里面xhr onload 到在同一父函数中创建的数组中 var url http api soundcloud com resolve j

  • Golang 正则表达式在字符串之间替换

    我有一些可能采用以下形式的字符串 MYSTRING MYSTRING n MYSTRING n MYSTRING randomstringwithvariablelength n 我希望能够将其正则表达式为MYSTRING foo 基本上替

  • 如何在 Web 服务器上设置 gzip 压缩？

    我有一个嵌入式网络服务器 总共有 2 兆空间 通常 您使用 gzip 文件对客户端有利 但这会节省我们在服务器上的空间 我读到你可以只 gzip js 文件并将其保存在服务器上 我在 IIS 上测试过 但没有任何运气 为了使这项工作成功 我

  • 如果一个对象结构与另一个对象结构不匹配/不匹配，如何引发异常

    我将读取格式正确的用户输入对象 也就是说 输入对象现在可以具有接口中未定义的任何键或子结构 如果用户提供了无效的对象 我如何抛出异常 预定义接口 export interface InputStructureInterface tableN

  • 如何将 arraylist 从 servlet 传递到 javascript？

    我通过在属性中设置数组列表并将其转发到 jsp 来从 servlet 传递数组列表 Servlet ArrayList

  • 类中可以有生成器 getter 吗？

    我的意思是吸气剂是发电机 我相信这一切都是 ES6 也许像这样 class a get count let i 10 while i yield i let b new a for const i of b count console lo

  • 如何重复 ajax 请求，直到满足 RxJS Observable 的条件？

    我正在尝试重复请求 直到响应包含使用 RxJS 的数据 此时我想调用成功 或失败 处理程序 但我在使用 RxJS 时遇到了麻烦 这是我目前的方法 redux observable action observable mergeMap gt

  • ChartJs：如何按时间值（而不是像素）以编程方式平移

    我使用的是chartJs 3 6 1 和 Chartjs plugin zoom 1 2 1 但我认为这并不重要 我有 2 个时间序列折线图 当我通过拖放平移一个图表时 我也想移动 平移另一个图表 为此 我为 graphA 启用了缩放 平移

  • 使用 ref 触发反应 dropzone 不起作用

    我正在实现这个库 https github com felixrieseberg React Dropzone Component https github com felixrieseberg React Dropzone Compone

  • Jwt 签名和前端登录身份验证

    我有这个特殊的 jwt sign 函数 Backend const token jwt sign id user id process env TOKEN SECRET expiresIn 1m res header auth token

  • 在 JavaScript 函数的 Django 模板中转义字符串参数

    我有一个 JavaScript 函数 它返回一组对象 return Func id name 例如 我在传递包含引号的字符串时遇到问题 Dr Seuss ABC BOOk 是无效语法 I tried name safe 但无济于事 有什么解

  • MongoDB：javascript执行失败：无法在 src/mongo/shell/collection.js 保存 DBQuery 对象

    在 MongoDb 中 当我尝试修改集合中的现有文档时 它会生成以下异常 javascript execution failed can t save a DBQuery object at src mongo shell collecti

  • 如何映射轮播的子项数组？

    我正在尝试将 Carousel 组件包装在映射对象数组周围作为组件的子级 目前我只能让映射创建映射对象的 1 个子对象 轮播需要像这样

随机推荐

热门标签