<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8" />

        <title></title>

        <style>

            #content{

                width :500px;

                height:300px;

                border: 1px solid ###;

                margin: 30px auto;

            }

            #search{

                width :500px;

                height:300px;

                border: 1px;

                margin: 30px auto ;

            }

            #change{

                background: yellow;

            }

        </style>

        <script>

            window.onload=function()

            {

                var btn=document.getElementById('btn');

                var texts=document.getElementById('texts');

                //var content=document.getElementById('content');

                var content=document.getElementsByClassName('con')[];

                var str=content.innerHTML;

                console.log(str);

                //console.log(str)

                btn.onclick=function(){

                    var val=texts.value;

                    if (val=="")

                    {

                        alert("请输入内容");

                    }

                    if(str.indexOf(val)==-)

                    {

                        alert('你输入的内容不在范围内');

                    }

                    else

                    {

                        content.innerHTML=str.split(val).join('<span id="change">'+val+'</span>');

                    }

                }

            }

        </script>

    </head>

    <body>

        <div  class="con" id="content" >

            . 您可以上传或是从邮件附件中摘取文件并保存于您邮箱的网络存储空间中, 您将可以在发送邮件时直接将网络存储中的附件加入到待发邮件中.

            . 因为存储文件夹使用的是您的邮箱空间, 所以您需要注意合理分配存储文件夹的数据量.

            . 在您删除存储文件夹下的子文件夹时, 需要先将子文件夹中的文件转移或删除, 否则子文件夹无法被删除.

            . 您可以通过设置密码或是不设置密码的方式共享您的存储文件夹数据.

        </div>

        <div

            <div  class="con1" id="content" >

            . 在您删除存储文件夹下的子文件夹时, 需要先将子文件夹中的文件转移或删除, 否则子文件夹无法被删除.

            . 您可以通过设置密码或是不设置密码的方式共享您的存储文件夹数据.

          </div>

            <input type="text" id="texts"/>

            <input type="button" value="查找" id ="btn"/>

        </div>

    </body>

</html>

实现效果：

javascript实现html中关键字查询的更多相关文章

  1. MySQL数据库之单表查询中关键字的执行顺序

    目录 MySQL数据库之单表查询中关键字的执行顺序 1 语法顺序 2 执行顺序 3 关键字使用语法 MySQL数据库之单表查询中关键字的执行顺序 1 语法顺序 select distinct from ...

  2. 细数Javascript技术栈中的四种依赖注入

    作为面向对象编程中实现控制反转(Inversion of Control,下文称IoC)最常见的技术手段之一,依赖注入(Dependency Injection,下文称DI)可谓在OOP编程中大行其道 ...

  3. c# 通过关键字查询

    1:首先需要在前端显示界面View视图中添加查询按钮: <div> <div>@Html.NopLabelFor(model => model.IndividualNam ...

  4. 【本周面试题】第1周 - 获取URL中的查询字符串参数、get和post的区别

    [此系列优先解决自己经历的面试题] 2018.11.16 面试题一:你如何获取浏览器URL中查询字符串中的参数? 题目代码: 测试地址为 https://www.sogou.com/tx?query= ...

  5. Linq中关键字的作用及用法

    Linq中关键字的作用及用法 1.All:确定序列中的所有元素是否都满足条件.如果源序列中的每个元素都通过指定谓词中的测试,或者序列为空,则为 true:否则为 false. Demo: 此示例使用 ...

  6. javascript call与apply关键字的作用

    apply接受两个参数.第一个参数指定函数体内this对象的指向,第二个参数为一个带下标的集合. call则是apply的语法糖,如果参数数量固定,则可以不用带下标的集合传第二个参数. 1 2 3 4 ...

  7. 大型 JavaScript 应用架构中的模式

    原文:Patterns For Large-Scale JavaScript Application Architecture by @Addy Osmani 今天我们要讨论大型 JavaScript ...

  8. 完善ext.grid.panel中的查询功能(紧接上一篇)

    今天的代码主要是实现,Ext.grid.panel中的查询,其实我也是一名extjs新手,开始想的实现方式是另外再创建一个新的grid类来存放查询出的数据(就是有几个分类查询就创建几个grid类),这 ...

  9. ajax基础语法、ajax做登录、ajax做用户名验证是否可用、ajax做关键字查询动态显示、ajax做用表格显示数据并增加操作列

    AJAX: AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新.   ...

随机推荐

  1. Linux报错：“/bin/bash^M: 坏的解释器

    原因是linux下的文件,在windows下面编辑过.在win下编辑的时候,换行结尾是\n\r , 而在linux下 是\n 解决方法,将文件里面的内容做替换即可 sed -i 's/\r$//' b ...

  2. 使用tomcat部署多个站点,访问时当然不能带上下文路径咯

    参考 http://blog.sina.com.cn/s/blog_6341fc0f0100lzaj.html tomcat的server.xml文件(比如C:\Program Files\Apach ...

  3. python学生管理系统

    import osimport re #获取本机用户名,构建student.txt文件名创建在左面import getpassusername=getpass.getuser()print(" ...

  4. 根据一个分类id 获取这个分类底下所有子分类的商品信息，根据下面方法查询出所有有关分类id 再 根据这些id去商品表里查询所有商品信息

    /** * 检测该分类下所有子分类,并输出ID(包括自己) * 数据库字段 catid pid */ function getChildrenIds ($sort_id){ include_once ...

  5. webpack学习之——模块(Modules)

    在模块化编程中,开发者将程序分解成离散功能块(discrete chunks of functionality),并称之为模块. 每个模块具有比完整程序更小的接触面,使得校验.调试.测试轻而易举. 精 ...

  6. hdu 1358 Period(KMP入门题)

    Period Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total Subm ...

  7. 替换文本：将文本文件中的所有src替换为dst

    题意: 将文本文件中的所有src替换为dst 方法一:使用String import java.io.File; import java.io.FileNotFoundException; impor ...

  8. 【JZOJ5064】【GDOI2017第二轮模拟day2】友好城市 Kosarajo算法+bitset+ST表+分块

    题面 在Byteland 一共有n 座城市,编号依次为1 到n,这些城市之间通过m 条单向公路连接. 对于两座不同的城市a 和b,如果a 能通过这些单向道路直接或间接到达b,且b 也能如此到达a,那么 ...

  9. Openck_Swift源代码分析——添加、删除设备时算法详细的实现过程

    1 初始加入设备后.上传Object的详细流程  前几篇博客中,我们讲到环的基本原理即详细的实现过程,加入我们在初始创建Ring是执行例如以下几条命令: •swift-ring-builder obj ...

  10. CWnd::Attach()具体解释

    CWnd::Attach Attaches a Windows window to a CWnd object. BOOL Attach(    HWND hWndNew ); Parameters ...