<!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. Django项目：CRM(客户关系管理系统)--45--37PerfectCRM实现King_admin添加用户时密码加密

    #views # ————————02PerfectCRM创建ADMIN页面———————— from django.shortcuts import render # ————————04Perfe ...

  2. h5文件简介

    h5文件是层次格式的第5代版本,用于存储科学数据的一种文件格式和库文件,由美国超级计算中心与应用中心研发的文件格式,用以存储和组织大规模数据. H5将文件结构简化成两个主要的对象类型: 1 数据集da ...

  3. 主流浏览器HTML5视频格式差异

    因最近在研究video.js,现在遇到的问题是在js中设置了swf,但是在ie8下只是显示黑屏并没有播放视频,在网上进行搜索时查到了有关各个浏览器支持哪些视频格式的文章,现在此记录下,方便以后查阅. ...

  4. stackless 安装

    1.下载源码 https://bitbucket.org/stackless-dev/stackless/wiki/Download 2.编译.安装.路径生效 apt-get install libr ...

  5. 话说placeholder

    placeholder 属性提供一种提示(hint),描述输入域所期待的值. 注释:placeholder 属性适用于以下类型的 <input> 标签:text, search, url, ...

  6. JavaScript也是黑客技术？

    JavaScript 超级 BUG!多款 x86/ARM 处理器瞬间遭破解 https://www.oschina.net/news/82108/javascript-bug-cause-cpu-as ...

  7. netbeans 代码自动补全设置

    编辑器-----代码完成------语言选择"JAVA"------在如图红框中输入 @ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrst ...

  8. MacBook下为要运行的.net core 项目指定sdk版本

    安装完.net core 3.0,运行早期版本构建的项目遇到运行错误,查阅官方文档解决问题,特此记录!官方原文如下: SDK 使用最新安装的版本 SDK 命令包括 dotnet new 和 dotne ...

  9. Apache HttpComponents 工具类 [ HttpUtil ]

    pom.xml <dependency> <groupId>org.apache.httpcomponents</groupId> <artifactId&g ...

  10. angular可以做的小功能 未完成

    1,网上购物满多少减多少 思路: 效果图,满500减10元邮费 1,html部分有基本布局, <div> <h3>化妆品</h3> 单价 <input typ ...