<!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. HTML,CSS,JS优化

    HTML部分 语义化HTML:好处在于可以使代码简洁清晰,支持不同设备,利于搜索引擎,便于团队开发: 减少DOM节点:加速页面渲染: 给图片加上正确的宽高值:这可以减少页面重绘,同时防止图片缩放: 防 ...

  2. canvas用2d渲染出3d的感觉

    好久没有写博客了,深究动画其实也就是setTimeout setInterval requestAnimationFrame很多人可能不熟悉requestAnimationFrame但是事实上和set ...

  3. 关于github 代码管理，协作开发

    公司要用github 进行项目管理,  了解了一下github相关权限管理. 并做笔记如下: 个人账户可以建立公有/私有  repository ,  公有的全天下的人都能看到,私有的全天下人都看不到 ...

  4. ORACLE时间常用函数(字段取年、月、日、季度)

    TO_DATE格式 Day: dd number 12 dy abbreviated fri day spelled out friday ddspth spelled out, ordinal tw ...

  5. webpack4配置基础

    前言 为什么要使用构建工具? 1.转换ES6语法(很多老版本的浏览器不支持新语法) 2.转换JSX  3.CSS前缀补全/预处理器  4.压缩混淆(将代码逻辑尽可能地隐藏起来)  5.图片压缩  6. ...

  6. git中由readme.md文件引发的问题

    在GitHub上建立一个仓库并且添加了readme.txt文件. 无论是push前先将远程仓库pull到本地仓库,还是强制push都会弹出这个问题. Github 禁用了TLS v1.0 and v1 ...

  7. Vue. 之 Element table 单元格内容隐藏

    Vue. 之 Element table 单元格内容隐藏 在table显示数据时,若某个单元格的内容过多,需要进行隐层,在这一列的单元格属性添加::show-overflow-tooltip=&quo ...

  8. Zookeeper 扫盲

    Zookeeper 扫盲 :disappointed_relieved: 配置文件详解: tickTime:基本事件单元,以毫秒为单位,这个时间作为 Zookeeper 服务器之间或客户端之间维持心跳 ...

  9. Linux监听的网络服务$ netstat -ntlp$ netstat -nulp$ netstat -nxlp

    我一般都分开运行这三个命令,不想一下子看到列出一大堆所有的服务.netstat -nalp倒也可以.不过我绝不会用 numeric 选项 (鄙人一点浅薄的看法:IP 地址看起来更方便). 找到所有正在 ...

  10. LINNX联网配置文件

    联网 /etc/gated.conf gated 的配置.只能被 gated 守护进程所使用. /etc/gated.version 包含 gated 守护进程的版本号. /etc/gateway 由 ...