程序员经验分享-hwhale

使用正则表达式和 JavaScript 突出显示 html 中的单词 - 几乎就在那里

2023-11-21

我正在编写一个 jquery 插件，它将执行浏览器样式的页面查找搜索。我需要改进搜索，但还不想解析 html。

目前我的方法是获取整个 DOM 元素和所有嵌套元素，然后简单地对给定术语运行正则表达式查找/替换。在替换中，我将简单地在匹配的术语周围包裹一个跨度，并使用该跨度作为我的锚点来进行突出显示、滚动等。任何 html 标签内的字符都不能匹配，这一点至关重要。

这是我所得到的最接近的结果：

(?<=^|>)([^><].*?)(?=<|$)

它在捕捉所有角色方面做得非常好not在 html 标签中，但我无法弄清楚如何插入我的搜索词。

Input: Any html element (this could be quite large, eg <body>)    
Search Term: 1 or more characters    
Replace Txt: <span class='highlight'>$1</span>

UPDATE

当我测试时，以下正则表达式可以满足我的需求http://gskinner.com/RegExr/...

Regex: (?<=^|>)(.*?)(SEARCH_STRING)(?=.*?<|$)
Replacement: $1<span class='highlight'>$2</span>

但是我在 javascript 中使用它时遇到了一些问题。使用以下代码，chrome 给我错误“无效的正则表达式：/(?)(.？）（玛丽）（？=。?

var origText = $('#'+opt.targetElements).data('origText');
var regx = new RegExp("(?<=^|>)(.*?)(" + $this.val() + ")(?=.*?<|$)", 'gi');
$('#'+opt.targetElements).each(function() {
   var text = origText.replace(regx, '$1<span class="' + opt.resultClass + '">$2</span>');
   $(this).html(text);
});

它打破了组 (?) - 这是笨拙的东西还是正则表达式引擎的差异？

UPDATE

这个正则表达式在该组中被破坏的原因是 Javascript 不支持正则表达式后向查找。供参考和可能的解决方案：http://blog.stevenlevithan.com/archives/mimic-lookbehind-javascript.


只需使用内置的 jQuerytext() method。它将返回选定 DOM 元素中的所有字符。

对于 DOM 方法（文档为Node界面)：遍历元素的所有子节点。如果子节点是元素节点，则递归运行。如果是文本节点，则在文本中搜索（node.data），如果您想突出显示/更改某些内容，请缩短节点的文本直到找到的位置，然后插入包含匹配文本的高亮跨度和文本其余部分的另一个文本节点。

示例代码（调整后，原点是here):

(function iterate_node(node) {
    if (node.nodeType === 3) { // Node.TEXT_NODE
        var text = node.data,
            pos = text.search(/any regular expression/g), //indexOf also applicable
            length = 5; // or whatever you found
        if (pos > -1) {
            node.data = text.substr(0, pos); // split into a part before...
            var rest = document.createTextNode(text.substr(pos+length)); // a part after
            var highlight = document.createElement("span"); // and a part between
            highlight.className = "highlight";
            highlight.appendChild(document.createTextNode(text.substr(pos, length)));
            node.parentNode.insertBefore(rest, node.nextSibling); // insert after
            node.parentNode.insertBefore(highlight, node.nextSibling);
            iterate_node(rest); // maybe there are more matches
        }
    } else if (node.nodeType === 1) { // Node.ELEMENT_NODE
        for (var i = 0; i < node.childNodes.length; i++) {
            iterate_node(node.childNodes[i]); // run recursive on DOM
        }
    }
})(content); // any dom node

还有高亮.js，这可能正是您想要的。

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

html

regex

replace

使用正则表达式和 JavaScript 突出显示 html 中的单词 - 几乎就在那里 的相关文章

随机推荐

  • 如何使用 R 中的 gtsummary 包向表中的标签添加下标？

    I would like to introduce a subscript in a variable name for a regression summary table generated using tbl regression i

  • 预期 LP_c_double 实例而不是 c_double_Array - python ctypes 错误

    我在 DLL 中有一个函数 必须用 python 代码包装它 该函数需要一个指向双精度数组的指针 这是我收到的错误 Traceback most recent call last File C FROGmoduleTEST py line

  • android 中是否可以使用 loadDataWithBaseURL() 方法显示图像？

    我正在尝试使用以下命令显示 html 文件的内容loadDataWithBaseURL 安卓中的方法 我只有一个字符串 其中包含一个名为 source 的字符串中的 Html 文件数据 然后将其传递给该方法 for e g String s

  • 将 HTML 部分预加载到 AngularJS UI-Router 应用程序中

    我注意到 在完全刷新我的 Angular 应用程序时 状态转换 我使用 ui router 但也可能类似于本机 Angular 路由 在第一次访问时有轻微的延迟 因为浏览器会执行 GET 请求来检索与给定状态关联的 HTML 部分 所有后续

  • jsoup线程安全

    Jsoup parse String html 没有被记录为线程安全的 如何使用 Jsoup 同时解析多个文档 谢谢 通过使用Joup parse 只要您不处理同一个文档 它就会在内部创建新对象 https groups google co

  • 使用“==”和“is”比较字符串[重复]

    这个问题在这里已经有答案了 可能的重复 is 关键字可能相当于 Python 中的相等运算符的类型 Python is 运算符对整数的行为异常 Hi 我有一个问题 也许它比我所问的问题更能启发我 考虑一下 gt gt gt x Hello

  • 在Google App Engine下从数据库动态加载Python应用程序代码

    我需要将 python 代码存储在数据库中并将其加载到某种 bootstrap py 应用程序中以供执行 我无法使用文件系统 因为我正在使用 GAE 所以这是我唯一的选择 然而我不是一个有经验的Python用户 我已经能够加载 1 行代码并

  • 以编程方式创建图层列表

    我正在尝试以编程方式创建一个图层列表 其中调整大小的位图作为项目 据我所知 BitmapDrawable 已被弃用 新的构造函数需要以下参数 public BitmapDrawable Resources res Bitmap bitmap

  • QWebEnginePage 中的透明背景

    我们正在尝试将一些应用程序从 Qt 4 移植到 Qt 5 4 Qt 5 4 有一个新的 Web 引擎 我们曾经制作过背景QWebView and QWebPage做到透明 view new QWebView this QPalette pa

  • PHP switch 语句跳转到另一个 case

    假设我有这样的事情 switch GET func case foo dobar break case orange if GET aubergine catdog DO DEFAULT OPTION else dosomethingEls

  • jQuery 克隆问题

    我正在尝试克隆一个 div 并更改该 div 中输入字段的名称 它适用于大多数浏览器 但 IE 7 不会更改输入字段的名称属性 Demo http jsbin com iduro 7 HTML pre pre div div

  • 如何缓存 AVPlayerItem（视频）以便在 UITableview 中重用

    我有许多视频在 UITableView 中显示 视频远程存储在服务器上 我可以使用以下一些代码将视频加载到表格视图中 NSString urlString NSString stringWithFormat row objectForKey

  • PHP、使用 htaccess 进行 URL 重写和 Microsoft IIS Url 重写

    我习惯使用 Apache 服务器 因此当启用 mod rewrite 时 我可以创建一个 htaccess 文件并使用 URL 重写 这是我的 htaccess 文件 RewriteEngine On RewriteCond REQUEST

  • 多线程Z3？

    我正在开发一个 Python 项目 目前我正在尝试以一些可怕的方式加快速度 我设置了 Z3 求解器 然后分叉该进程 让 Z3 在子进程中执行求解并传递将模型的可腌制表示返回给父级 这非常有效 并且代表了我正在尝试做的第一阶段 父进程现在不再

  • MacOS 10.10 上的 ipython - 未找到命令

    我正在尝试让 ipython 在 Mac OS 10 10 中工作 problem ipython returns bash ipython command not found context 我在 MacOS 10 10 上运行 pyth

  • twisted 文档字符串中这些格式的含义是什么？

    在twisted的源代码中 许多文档字符串包含这样的格式 L xxx 或C xxx 或以 开头的行 它们的含义是什么 例如 在twisted internet interfaces py中 def registerProducer prod

  • 如何在ListView中显示行号？

    显而易见的解决方案是在 ModelView 元素上拥有行号属性 但缺点是在添加记录或更改排序顺序时必须重新生成这些属性 有没有一个elegant解决方案 我觉得你have优雅的解决方案 但这可行 XAML

  • 无法获得没有哈希值的主干路由？

    我想要浏览器可以捕获和处理的可添加书签的 URL 如果我只是使用Backbone history start 然后我可以使用哈希 URL 例如 账户 但我想要没有哈希值的 URL a la 账户 但我无法使用它来工作Backbone his

  • 将加载的目标地址保留在寄存器中，直到指令退出

    我想使用基于事件的精确采样 PEBS 来记录 XeonE5 Sandy Bridge 上特定事件的所有地址 例如缓存未命中 However the Performance Analysis Guide for CoreTM i7 Proce

  • 使用正则表达式和 JavaScript 突出显示 html 中的单词 - 几乎就在那里

    我正在编写一个 jquery 插件 它将执行浏览器样式的页面查找搜索 我需要改进搜索 但还不想解析 html 目前我的方法是获取整个 DOM 元素和所有嵌套元素 然后简单地对给定术语运行正则表达式查找 替换 在替换中 我将简单地在匹配的术语

热门标签