jquery 输入框查找关键字并提亮颜色

痛定思痛。 2022-06-03 06:57 64阅读 0赞

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    
        <script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
        </script>
        <style>
            .pink{
                color:pink;
            }
        </style>
    </head>
    <body>
    <div>
        <p>爆米伐的白开穗,爆米伐的白开穗,爆米伐的白开穗,爆米伐的白开穗,爆米伐的白开穗,爆米伐的白开穗,爆米伐的白开穗,爆米伐的白开穗,爆米伐的白开穗,</p>
        <hr />
        <p>爆米伐的白开穗,爆米伐的白开穗,爆米伐的白开穗,爆米伐的白开穗,爆米伐的白开穗,爆米伐的白开穗,爆米伐的白开穗,爆米伐的白开穗,爆米伐的白开穗,</p>
        <input type="text" id="find"/>
        <button οnclick="search()">查找</button>
    </div>
    <script>
        function search() {
            var searchText = $('#find').val();  //获取输入框的值 var regExp = new RegExp(searchText, 'g'); //正则表达式，将输入框中的值放入 $("p").each(function () {
                var text = $(this).text();  //获取p的文本值 var newHtml = text.replace(regExp, '<span class="pink">' + searchText + '</span>');  //如果正则表达式的值，在p中存在，则用后面的参数替代原有的值 $(this).html(newHtml);//更新一下 });
        }
    </script>
    </body>
    </html>

发表评论取消回复

表情：

评论列表（有 0 条评论，64人围观）

还没有评论，来说两句吧...

相关阅读

相关 Android自定义文本输入框光标颜色

主要通过配置文本输入框如EditText的： android:textCursorDrawable 属性完成。如果设置 android:textCur

雨点打透心脏的1/2处/ 2023年10月18日 09:19/ 0 赞/ 144 阅读

相关 input输入框输入数值后，设置背景颜色为透明

input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:f

灰太狼/ 2022年12月29日 14:14/ 0 赞/ 205 阅读

相关 JQuery输入框中输入内容改变事件

输入框中输入内容改变事件 $('object').bind('input propertychange keyup', function() {

本是古典何须时尚/ 2022年07月16日 05:48/ 0 赞/ 242 阅读

相关 jquery的搜索框输入提示页面

<!doctype html> <html> <head> <meta http-equiv="Content-Type" content="t

旧城等待，/ 2022年06月12日 00:44/ 0 赞/ 327 阅读

相关输入框：请输入关键字小功能

username: <input type="text" name="username" style="color:999" value="请输入用户名" on

╰半夏微凉°/ 2022年06月05日 09:47/ 0 赞/ 249 阅读

相关 jquery 输入框查找关键字并提亮颜色

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

痛定思痛。/ 2022年06月03日 06:57/ 0 赞/ 64 阅读

相关 PC端修改input 输入框光标颜色

input 输入框的光标颜色修改方法： 1. 根据字体颜色，即设置color，光标颜色会一起改变 <div class="custom-input">

古城微笑少年丶/ 2022年04月11日 11:58/ 0 赞/ 605 阅读

相关 jQuery 监听输入框输入（兼容IE8）

> 因 IE9 以下版本的浏览器不兼容 oninput 事件，所以经常使用 keyup + change 的组合事件来完成，但是体验有所欠缺。 > > 其实 IE 早已有与

一时失言乱红尘/ 2021年11月19日 11:58/ 0 赞/ 459 阅读

相关 input 框输入关键字获取数据

<input type="text" v-model="search" :value="search" @input="messagesearch" placeholder=

亦凉/ 2021年11月09日 02:58/ 0 赞/ 415 阅读

相关 JQuery自动添加多文件输入框

<table id="fileTable"> <tr> <td> <input type="file" name="file"><in

迈不过友情╰/ 2021年09月12日 05:28/ 0 赞/ 333 阅读