RegExp 不区分大小写的多字突出显示

2023-12-05

我试图突出显示关键字搜索的正常工作。我遇到了几个问题。

  1. 不区分大小写适用于第一个单词,但希望它替换为原始大小写单词,而不是小写搜索单词。

即搜索趋势,它用趋势替换趋势,我知道为什么,但想弄清楚如何替换回找到的单词,而不是搜索到的单词

  1. 第二个单词不匹配,不区分大小写。

即搜索趋势微与趋势微不匹配。

这是 jsFiddle:http://jsfiddle.net/hh2zvjft/1/

if ($(".ProjectSearch").val().length > 0) {
    var searchedText = $(".ProjectSearch").val();
    var wordList = searchedText.split(" ");
    $.each(wordList, function (i, word) {
        $(".ProjectTaskGrid:contains('" + word + "')").each(function (i, element) {
            var rgxp = new RegExp(word, "gi");
            var repl = '<span class="search-found">' + word + '</span>';
            element.innerHTML = element.innerHTML.replace(rgxp, repl);
        });
    });
}

您能帮忙找出问题并提出改进建议吗?谢谢!

用于得出代码的一些参考:

https://stackoverflow.com/a/120161/2727155

https://stackoverflow.com/a/10011639/2727155


突出显示多个单词(忽略 HTML 标签)

const regEscape = str => str.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
const EL_input = document.querySelector("#input");
const EL_area = document.querySelector("#area");
const org = EL_area.innerHTML; // Store the current HTML state

const highlight = () => {
  const val = EL_input.value;
  
  if (!val) return EL_area.innerHTML = org;
    
  const pts = regEscape(val.trim()).split(/ +/);
  const reg = new RegExp("(?![^<]+>)(" + pts.join("|") + ")", "ig");
  const res = org.replace(reg, '<span class="highlight">$1</span>');
  
  EL_area.innerHTML = res;
};

EL_input.addEventListener("input", highlight);
highlight();
div {
  padding: 5px;
  border: solid 1px #CCC;
}

.highlight {
  background: gold;
}
<input id="input" autocomplete=off type="text" value="tren pan com br" />

<div id="area">
  Renew Trend Worry-Free Business Security license
  that <a href="http://someweb.com">someweb.com</a> will expire in 60 days.<br>
  Activate BR like breakline trend
  and [ confirm <span>SOME <span>SPAN</span> IS HERE</span>
  upon electronic<br> delivery notification
  from Trend Micro
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

RegExp 不区分大小写的多字突出显示 的相关文章

随机推荐

  • 如何从java程序在终端运行命令?

    我需要从 JAVA 程序在 Fedora 16 的终端运行命令 我尝试使用 Runtime getRuntime exec xterm 但这只是打开终端 我无法执行任何命令 我也尝试过这个 OutputStream out null Pro
  • Maven TestNG 项目,将命令行参数传递给 testng.xml 文件

    我有一个 Maven TestNG 项目 并且正在尝试将几个命令行参数传递到 testng xml 文件中 testng xml 文件如下所示
  • 将最新季度财务资产负债表结果导出到单个 Excel 工作簿中?

    下面的代码是我到目前为止所拥有的 感谢我的 Luis先前的问题 当前代码为每个股票代码 以及所有季度 创建一个单独的工作表 目前的结果如下图所示 我想要一张仅包含最新季度业绩的表格 因此 B 列中的结果将是 AMZN C 列将是 MSFT
  • html + css + jquery:切换显示更多/更少文本

    我正在做一个个人项目 遇到一个小问题 这是我的代码 目前有效 http jsfiddle net gvM3b show more click function this text Show Less text toggleClass sho
  • 从我的 YouTube 频道检索我的评论历史记录

    我正在尝试通过 YouTube API 从我的频道检索我自己的评论列表 但找不到方法 这可以通过历史记录获得 https www youtube com feed history comment history 但 API 文档中没有提及
  • 为什么 C++ 中默认对“char”进行签名?

    为什么 char 默认在 128 到 127 范围内 而它应该表示一个文本表示在 0 到 255 范围内的 字符 从这个意义上说 我猜 char 默认情况下应该是无符号的 只有当我们打算将其视为 数字 时 我们才必须添加 signed 关键
  • 如何为文本视图中选定的文本提供背景颜色

    如何为文本视图中选定的文本提供背景颜色 我正在开发基于文本视图的应用程序 我必须更改所选文本的颜色 我尝试使用委托方法 但没有找到任何这样的属性 您能建议一种方法来克服这个问题吗 在 AppStore 限制内无法更改选择颜色 事实上 考虑到
  • python多进程启动失败

    这是我在 python 中执行简单多处理任务的代码 from multiprocessing import Process def myfunc num tmp num num print squared O P will be tmp r
  • 修复 UTF-8 文本中的 mojibakes

    我有一个包含 UTF 8 葡萄牙语文本的文件 不知何故 生成该文件的人选择了错误的编码 并且文本中充满了mojibake IDENTIFICA O instead of identifica o Andr instead of Andr 自
  • 您将如何找到该算法的复杂性?

    function alg1 n 1 a 0 2 for o 1 to n do 3 for t 1 to o do 4 for k t to o t do 5 a a 1 6 return a 如果有人能指导我如何找到最坏的情况 以及如何获
  • WiFiDirectActivity 是什么/在哪里

    我正在尝试理解并实现 中描述的 不完整 代码 使用 Wi Fi 创建 P2P 连接 这是作为一个单独的类添加到我现有的活动中 示例代码中有一行如下 activity setIsWifiP2pEnabled true 但没有显示变量 acti
  • Rails 和 Heroku PGError:其中参数不存在列

    我四处搜索并发现了一些类似的搜索 但没有一个真正详细说明了我遇到的问题 所以我想我应该分享我的发现 Problem当将 Ruby on Rails 项目推送到 Heroku 时 数据库 PostgresQL 我收到了一些在开发环境中没有收到
  • 如何从indexedDB获取对象存储?

    我在我的应用程序上有用于网络存储的indexedDb 我想通过以下代码获取商店 var store myapp indexedDB db transaction tree nodes readwrite objectStore tree n
  • MVC 开始集合项

    我在将部分视图 BeginCollectionItem 保存到数据库时遇到一些问题 我有一个表单 其中包含可以添加到页面的动态数量的 部分 并且在每个字段中都有一个文本框 用户可以在其中输入部分名称 据我所知 部分视图中的 BeginCol
  • 如何确定 javascript 模块是否通过脚本 src 导入或加载?

    假设我有一个名为module js export default function greet console info hello Within module js 无论是在函数内部还是外部greet 如何确定模块是否已使用以下方式加载
  • 如何从另一个片段打开一个新片段?

    我尝试在片段之间进行导航 我有NewFragment java随着新片段的工作 我的问题是 我该怎么做这个onClickListener run NewFragment java正确吗 button setOnClickListener n
  • 如何使用 Retrofit-Android 记录请求和响应正文?

    我在 Retrofit API 中找不到用于记录完整请求 响应主体的相关方法 我 期望在探查器中得到一些帮助 但它只提供有关响应的元数据 我尝试在生成器中设置日志级别 但这也对我没有帮助 RestAdapter adapter new Re
  • Ajax 请求不是异步的

    我有一个ajax问题 foreach ids as id ajax url script php data id id cache false 如果我循环 6 次 在 foreach 循环中 我应该向服务器发出 6 个异步请求 但本例中的
  • 如何在sqlalchemy中按列表排序数据

    我有来自外部 postgresql 数据库的 ID 列表 A 1 2 3 4 5 6 7 98 0 我会使用 SQLAlchemy 对数据库进行查询 但我会按 A 列表对 postgresql 中的数据进行排序 我已经阅读了很多文档 但找不
  • RegExp 不区分大小写的多字突出显示

    我试图突出显示关键字搜索的正常工作 我遇到了几个问题 不区分大小写适用于第一个单词 但希望它替换为原始大小写单词 而不是小写搜索单词 即搜索趋势 它用趋势替换趋势 我知道为什么 但想弄清楚如何替换回找到的单词 而不是搜索到的单词 第二个单词