关于关键字搜索之后，关键字标红的写法

最新推荐文章于 2022-02-26 14:07:54 发布

原创最新推荐文章于 2022-02-26 14:07:54 发布 · 3.4k 阅读

6 ·

CC 4.0 BY-SA版权

温故而知新专栏收录该内容

18 篇文章

订阅专栏

本文介绍了一种在项目中实现关键字搜索并高亮显示的方法，通过正则表达式匹配搜索关键字，对搜索结果中的关键字进行样式修改，使其在页面上以红色显示，提升用户体验。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

做项目的时候，有一个搜索，输入关键字，然后搜出来的结果，关键字标红。类似下图
在这里插入图片描述
可以通过正则的方法实现。

 //判断搜索记录是否包含某个关键字
checkPara(val,para){
   if (val.indexOf(para) !== -1 && para !== ''){
     return true;
   }else {
     return false
   }
},
showData(val) {
        val = val + '';
        if (this.checkPara(val,this.keywords)) {
            //如果搜索结果记录包含关键字中的任何一个，那么修改样式
            return val.replace(this.keywords , "<span color='red'>" + this.keywords + '</span>')
        } else {
            return val //不做任何修改
        }
    },

然后在搜索结果中调用 showData 方法，

<span class="name" id="wordsName" v-html="showData(searchResult)"></span>

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

元宝圆圆圆

关注关注

0
点赞
踩
6

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

JS实现HTM搜索关键词高亮显示

猿小白的博客

05-09

1284

如何利用JS实现HTML搜索关键词高亮显示呢？

模糊查询时：给关键字key加红色显示提示【步骤图解】

03-11

中国人这种效果

1 条评论您还未登录，请先登录后发表或查看评论

vue关键字搜索高亮标红

怎么办我好菜啊

01-14

1520

//第一个参数是搜索出的字符串，第二个参数是要高亮的字符串 export function highLightTableMsg(msg, highLightStr) { if (msg == null) { msg = ‘’ } if (highLightStr == null) { highLightStr = ‘’ } if (msg instanceof Object) { msg = JSON.stringify(msg) } if (highLightStr instanceof Object)

java关键字标红处理

leege100

07-16

3492

public static SpannableStringBuilder putstr(String keyword, String strtext) { String docInfo = strtext; int keywordIndex = strtext.indexOf(keyword); SpannableStringBuilder style = new Spannab

让搜索出来的关键字变红色

caaclxf的专栏

09-09

1625

?输入内容：cnbruce?love?cnrose输入查询内容：?cn你会发现结果的。[code]strText=window.prompt("请输入内容:");strFind=window.prompt("请输入查询内容:");Function Highlight(strText, strFind, strBefore, strAfter)??? Dim nPos??? Di

Java标红_java关键字标红处理

weixin_35601611的博客

02-20

2010

有时我们在界面上输出一段文字，文字中的关键字需要用红色处理，怎么办呢？下面就是方法：public static SpannableStringBuilder setKeywordRed(String keyword, String strtext) {String docInfo = strtext;int keywordIndex = strtext.indexOf(keyword);Spann...

Grep命令查找多个字符串（grep同时匹配多个关键字或任意关键字）

embelfe_segge的博客

02-26

1024

前言 grep 命令支持三种正则表达式语法：Basic、Extended 和 Perl-compatible 。当没有指定正则表达式类型时，grep 命令将搜索模式默认为基本正则表达式。要搜索多个匹配模式，可以使用 OR ( alternation ) 运算符。我们可以用 OR 运算符 |( pipe )指定不同的匹配项，这些匹配项可以是文本字符串，也可以是表达式集。值得注意的是，在所有正则表达式运算符中，这个运算符的优先级是最低的。使用 grep 命令基本正则表达式搜索多个匹配模式的语法如下： $?g

vue中使用js实现搜索结果关键字高亮

以沫wh的博客

03-11

2503

vue中使用js实现搜索结果关键字高亮需求一：只会高亮完全匹配的关键字需求二：会高亮搜索结果中所有关键字使用结束实现效果是，搜索框中输入一个或者多个关键字，该关键字会在搜索结果中高亮显示出来，下面是两种需求（前提：我们这里搜索是和百度一样的全局搜索，只要有一个关键字匹配就会返回相应的搜索结果）需求一：只会高亮完全匹配的关键字 比如：输入’英语‘，则不会高亮有’语‘的搜索结果，只会高亮’英语‘ 两个字连在一起的搜索结果解释：使用了正则来匹配关键字，在搜索结果中一旦匹配中搜索词，则标红高亮代码 met

system标红了

03-13

好的，用户提到“system标红了”，这通常是在Java代码中遇到编译错误或IDE的语法检查提示。我需要先分析可能的原因。首先，Java中并没有名为“System”的关键字或内置类，但标准库中有java.lang.System类，用户...

vue中export标红

03-21

### Vue 中 `export` 关键字标红问题解决方案在开发过程中，如果遇到 IDE 或编辑器中标记 `export` 关键字为错误的情况，通常是因为 ESLint 的配置不正确或者未被正确认读所致。以下是针对该问题的具体分析与解决...

关键词变红--正则表达式

过客的博客

04-09

3304

搜索就是我在搜索框里面就是个关键字然后点击搜索然后它会出现对应的标题内容标题内容这样的，可是下去然后我需要，如果说我这个关键字的标题或者内容中有出现我就把它显示出来，但是我就是要做关键字然后在标题或者说内容这里，如果说出现了这个，关键是就把这关键字标红； var str = $('.text').html(); $('

java replaceAll用法－模仿Google搜索关键字变红

iteye_19463的博客

01-21

308

replaceAll用法－模仿Google搜索关键字变红下面代码用在jsp 本篇文章来源于 :刘志猛博客原文链接： [url]http://www.liuzm.com/article/java/095008r.htm[/url]

Java基础之关键字与标识符

Red__Wall的博客

06-10

351

关键字的概述Java的关键字对java的编译器有特殊的意义，他们用来表示一种数据类型，或者表示程序的结构等，关键字不能用作变量名、方法名、类名、包名。常见的关键字对于关键字不必死记硬背，如果使用关键字作为标识符，编译器能提示错误。并且以后用的多了就熟练了----------------------------------------------------------分割线------------...

linux 在日志中搜索关键字,并标红

最新发布

05-15

<think>好的，用户的问题是关于如何在不使用new关键字的情况下初始化Plupload。首先，我需要回顾一下JavaScript中创建对象实例的常规方法。通常，Plupload的初始化是通过new操作符调用构造函数来完成的，比如var uploader = new plupload.Uploader({...});。但用户希望避免使用new，这可能是因为他们想采用不同的设计模式，或者避免某些上下文问题。接下来，我应该考虑替代方案。在JavaScript中，不使用new来创建实例的方法有几个可能性。例如，工厂函数是一种常见的方法，它可以封装new的调用，返回新的实例。另一种可能是使用Object.create()，不过这可能不适用于需要构造函数初始化的对象。此外，检查Plupload的API文档是否有提供工厂方法或其他初始化方式也很重要。根据用户提供的引用，特别是引用[3]中的Vue示例，可能涉及到如何在不同框架中初始化Plupload。但用户的问题更关注不使用new的替代写法。我需要确认Plupload库本身是否支持其他初始化方法，或者是否有静态方法可用。例如，某些库提供.create()方法作为工厂函数。假设Plupload没有提供内置的工厂方法，用户可能需要自己封装一个工厂函数。例如，创建一个函数，内部调用new并返回实例。这样用户就可以通过调用函数而不是直接使用new来初始化。这符合用户的需求，因为函数调用不显式使用new关键字。同时，需要注意可能存在的上下文问题，比如在严格模式下，构造函数是否必须使用new调用。如果Plupload的构造函数强制使用new，那么替代方法可能需要通过apply或call来正确绑定this，但这可能比较复杂，并且不一定可行。另一个可能性是使用立即调用的函数表达式（IIFE）来返回实例，但这本质上还是使用了new，只是被封装起来了。例如： var uploader = (function() { return new plupload.Uploader({...}); })(); 但这可能不是用户想要的，因为内部仍然使用了new。用户可能希望完全避免new关键字，这时候可能需要查看Plupload是否有其他初始化方式，比如通过一个初始化函数。另外，用户提到之前使用过uploadify，但因兼容性问题转向Plupload，现在可能是在特定环境（如IE6）下工作，需要注意替代方法的兼容性。不过，根据引用[2]，Plupload不支持IE6，但用户的项目需要支持IE6，这可能存在矛盾，但用户可能已经解决了兼容性问题，或者问题中的IE6支持是误植。回到问题，如果Plupload必须通过new初始化，那么唯一的替代方法就是封装构造函数。例如： function createPluploadInstance(options) { return new plupload.Uploader(options); } var uploader = createPluploadInstance({...}); 这样用户代码中就没有显式的new关键字了。这可能是可行的解决方案。需要验证这种方法是否有效，是否会影响Plupload实例的功能。根据JavaScript的原型继承机制，工厂函数返回的实例应该与直接使用new创建的实例相同，因此功能上不会有差异。因此，最终的替代方法就是创建一个工厂函数来隐藏new关键字，这样用户就可以通过调用函数来获取实例，而不直接使用new。示例代码应该展示这种工厂模式的应用。总结，可能的步骤是：检查Plupload的API是否有替代方法，若无，则建议使用工厂函数封装new调用，并提供代码示例。同时，注意上下文是否正确，比如确保工厂函数中的this指向正确，但在此例中，由于直接返回new创建的实例，应该没有问题。</think>在JavaScript中，若需避免直接使用`new`关键字初始化`plupload.Uploader`，可通过以下两种替代方案实现： ### 方法一：工厂函数封装通过自定义函数隐藏`new`操作符，返回构造实例： ```javascript function createPlupload(options) { return new plupload.Uploader(options); // 内部仍使用new，但对外隐藏 } const uploader = createPlupload({ browse_button: 'upload_btn', url: '/upload' }); uploader.init(); // 初始化操作 ``` ### 方法二：借用立即执行函数利用IIFE（立即调用函数表达式）返回实例： ```javascript const uploader = (() => { const instance = new plupload.Uploader({ runtime_priority: 'html5', multi_selection: false }); instance.init(); return instance; })(); ``` ### 关键区别 | 方法 | 显式new调用 | 代码可读性 | 适用场景 | |-------------|-------------|------------|-------------------| | 工厂函数 | 隐藏 | 高 | 需要复用初始化逻辑| | 立即执行函数| 隐藏 | 中 | 单次初始化场景 | ### 注意事项 1. 所有实例必须调用`.init()`方法激活控件[^3] 2. 参数配置需完整，否则可能导致未定义行为[^1] 3. 在Vue等框架中推荐使用工厂模式，便于生命周期管理