SVG text内容搜索高亮 （JS搜索功能替代ctrl+F）

最新推荐文章于 2023-06-30 16:26:37 发布
最新推荐文章于 2023-06-30 16:26:37 发布
阅读量1.9k 收藏 1
点赞数
分类专栏： JS SVG 文章标签： svg JS chrl+F
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/arnoyshell/article/details/8660606
版权
本文介绍了一个使用JavaScript实现SVG文本搜索并高亮显示的解决方案。通过编写JS代码，可以替代浏览器的Ctrl+F功能，实现在SVG元素中搜索特定字符并突出显示。
摘要由CSDN通过智能技术生成

问题：ctrl+F无法实现对svg里面的文本搜索并且高亮显示；

解决：最终通过JS实现了本搜索功能，发布源代码如下：

第一步，把代码保存为.html格式；第二步，使用chrom浏览器打开，在文本框输入待搜索字符，点击按钮搜索即可。

<html><head><meta http-equiv="Content-Type" content="text/html; charset=GBK">
<title>3692-DMD|NM_004006</title>
</head>
<body id="body" οnscrοll="scrollBodyWindows()">
<div style="position:fixed;filter:alpha(Opacity=80);opacity:0.4;background-color:#ffffff;">
<input type="text" id="searchstr" name="searchstr" class="textbox" size="15">

最低0.47元/天 解锁文章
arnoyshell
关注
专栏目录
Web-拾贝
oscar999的专栏
03-10 1万+
JavaScript MVC框架PK：Angular、Backbone、CanJS与Emberhttp://www.csdn.net/article/2013-04-25/2815032-A-Comparison-of-Angular-Backbone-CanJS-and-Ember一个好的js method 方法查询的网站， 有browser兼容的介绍http://help.dottoro.co...
技术淘宝
热门推荐
dicha7140的博客
06-23 2万+
???? ???? ???? ????精度前端学习 ——前端开发100天（置顶） http://alloyteam.github.io/CodeGuide/https://github.com/AlloyTeam/CodeGuide cmd控制台的小技巧：可以直接将文件夹/文件丢进去，这样就会打印出该路径了。 舒服的字体家族样式： font: 300 16px/1.8 ...
svg灯泡发光
04-03
使用svg编写灯泡，并加载到html中，点击发光并且能够闪烁
javascript 搜索并高亮显示
weixin_34258782的博客
12-22 160
2015年12月22日 15:45:08 星期二 情景: 用来筛选列表中的数据, 由于单条数据很简短, 没有用php+mysql去实现筛选功能, 只用javascript进行筛选, 匹配的高亮, 或者将不匹配的隐藏掉 效果图: html:  1 &lt;div class="contracts-header"&gt;名称: &lt;input type="text" value=...
通过 vue-svg-icon 插件实现svg图标高亮显示
XiehaiyanLI的博客
08-27 863
用svg写的时候，发现图标不显示，只有文字显示。然后网上搜的方法，用插件实现。 安装 npm install vue-svg-icon --save-dev 在项目的 main.js 入口引入 vue-svg-icon 以便全局调用： import Icon from 'vue-svg-icon/Icon.vue'; Vue.component('icon', Icon); 在src文件夹下新建svg文件夹，把下载好的svg的图标放入，在 vue 组件按需加载： scale:可以调试图标大小
HTML5 SVG超炫搜索图标和搜索框转换动画特效
12-12
这是一款效果非常炫酷的HTML5 SVG搜索图标和搜索框转换动画特效。该特效中使用SVG制作一个搜索按钮图标，在点击这个图标的时候，它会变形转换为一个圆角的搜索框。当点击搜索框的关闭按钮时，搜索框又转换为搜索图标。
实现 SPY++ 的 FindWindow Tool 的高亮
个人开发记录
04-13 961
CSDN=>FAQ=>FAQ 展示  问题内容：实现 SPY++ 的 FindWindow Tool 的高亮(highlight)一个应用程序的窗体或内部 Object 的边缘 原讨论链接：http://community.csdn.net/expert/topicview1.asp?id=1887333 所属论坛：Windows SDK/API     审核组：Delphi 提问者：shuixi
sublime text插件
Kei's Blog
05-12 550
Package Control 安装方法 首先通过快捷键 ctrl+` 或者 View > Show Console 打开控制台，然后粘贴相应的 Python 安装代码。 Sublime Text 2 安装代码： import urllib2,os; pf='Package Control.sublime-package'; ipp = sublime.installed_pac
linux超级好用检索跳转工具hg:hyperlinked_grep （grep+kitty)
uunubt的专栏
10-10 970
说到文本搜索工具，大家一定会知道 grep, 它是 linux 最有用并最常用的工具之一。但如果要再一个大的工程项目中搜索某个关键词，大家也一定知道它比较耗时。所以就有了很多替代工具，之前最出名的是 Ack，Ag而最近又有了新的替代者 Ripgrep, 这个工具和 Ack/Ag 一样都使用了多线程的方法，但 rg 比它们更快。
VS Code插件和快捷键
rocktanga的博客
02-14 967
vs code已经不需要打印调试，而可以使用终端工具，在vs code中进行调试，vscode中调试也不好，还是要用chrome dev tool去调试 VS Code 配置 vscode的配置分为两部分 全局配置(用户配置) 和 局部配置(工作空间配置，仅针对单个project) 全局配置: User Settings是全局配置，应用到打开的任何一个VS Code实例。 在Windows环境中，打开 File > Preferences > Settings ，可以看到VS Co..
SVG中image tag的高亮
weixin_30922589的博客
11-22 208
今天下午和晚上全部在实验室调试scs可视化，下午主要时间在调试字符云图的东西，不过感觉没有提升，还是不好看，囧~~ 把力道图中的线条给调整了，调细之后，好看了不少。 因为需要多个区域交互，也就是需要高亮和选择，对SVG 的image 一直想办法进行高亮，后来是在image画了一个circle元素处理的。大小和image一样，只是在平时不显示，在交互时高亮circle就好~~ 好多事...
activiti5.21 + SVG 绘制流程图 高亮显示已完成节点
songqping的专栏
06-11 5301
本功能实现是结合actitivi5.21的数据结构来获取相关数据，并通过AJAX调用进行SVG图形的绘制。1、SpringBoot接口及相关实体/** * 读取组装绘制流程图的数据 */ @RequestMapping(value = "/getDrawingFlowChart/{processInstanceId}") @ResponseBody public ImgJSON getDra...
Canvas、SVG实现鼠标滑过某个区域高亮显示的方案说明
hbmern的博客
06-30 2366
方案2：用Canvas和SVG的方式实现。不规则的区域，手动取点，绘制路径，鼠标划过或鼠标点击的时候，判断鼠标坐标点是否在Path路径内，如果在某个区域内，就显示对应效果。但是要考虑一个问题，因为Path的点，我们是在某个分辨率基准下取点的，这就导致在不同屏幕分辨率下，会导致，无法取到点的问题，所以要重新计算鼠标坐标点。用户提供了某个厂区的底图（就一张静态图片），在底图中，划分了10个不规则区域，给了10个区域的高亮、开灯效果图片（切好了图），鼠标滑过每个区域的时候，要高亮显示，开灯的时候，显示开灯效果；
SVG HTML+JS+SVG搜索框下拉列表
qq_43434300的博客
08-24 561
html5 svg+js搜索框下拉列表显示更多代码，在搜索框输入文字的时候显示更多信息，这个更多选项在js里面自定义设置。 css文件夹下的 googleapos-family.css /* cyrillic-ext */ @font-face { font-family: 'Open Sans'; font-style: normal; font-weight: 300; src: local('Open Sans Light'), local('OpenSans-Light'),
创新实训(11)——SVG图片的显示与搜索词的定位
weixin_43740561的博客
05-10 495
SVG图片的显示与搜索词的定位SVG图片格式分析构造SVG 在查询文章详情的界面，既要显示文章的正文文本信息，又要显示文章对应的图片，还要把图片上对应的关键字标红，如图为查询文章中“李”字： SVG图片格式分析 <?xml version="1.0" encoding="UTF-8" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DT
JS页内查找关键词的高亮显示
zfmsa--装疯卖傻
02-16 509
&lt;html&gt;&lt;META HTTP-EQUIV="Content-Type" content="text/html; charset=gb_2312-80"&gt;&lt;TITLE&gt;WinWebMail&lt;/TITLE&gt;&lt;LINK href="images\hwem.css" rel=stylesheet&gt;&lt;s
VUE使用svg-pan-zoom.js对.svg文件进行解析及一些基本操作
温柔咩咩的博客
04-18 5275
从确定客户提出需求到实现后演示，用了22个小时完成，但之前从来没有接触过SVG这方面，所以做的不是很完美，比如搜索到的节点虽然高亮了，但没有放大显示。后期会不断完善，再做补充~
如何简单快速的获取到页面上的svg图标？
mister、奎
06-28 1万+
这里小编提供两个方法都可以获取到页面中的svg图标 火狐浏览器快速获取 小编拿花瓣网的这个svg图标来进行演示 第一步，在火狐浏览器中鼠标右击 => 查看页面信息 在媒体选项中找到我们要获取的svg图标项，注意的是svg很多都是白色的，所以我们单击发现下面的显示框什么都没有，其实是有的，只不过是白色的我们看不到而已 然后右下角另存为即可 会给我们生成一个.svg的文件 然后直...
svg text 动画
最新发布
09-03
无论我们选择CSS还是JavaScript，都可以使用SVG的特性和功能来创建各种文本动画效果。我们可以实现闪烁的字体、文字路径动画、字体逐渐出现和消失等效果。通过探索不同的动画属性和效果，我们可以创造出独特且吸引人...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值