<!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(客户关系管理系统)--51--42PerfectCRM实现AJAX全局账号注册

    #urls.py """PerfectCRM URL Configuration The `urlpatterns` list routes URLs to views. ...

  2. scrollbar 滚动条

    滚动条样式:自定义元素的滚动条 <!DOCTYPE html> <html> <head lang="en"> <meta charset ...

  3. spring深入学习(六)-----springmvc

    MVC设计模式 有过一定开发经验的人肯定都知道这个模式,先简单介绍下这种模式,然后再去讨论为啥要这么设计: 传统的web应用中应该主要包括这些组件,不同组件负责不同的模块. 数据实体:POJO 数据层 ...

  4. C# EventWaitHandle用法

    waithander就是用来阻塞当前线程的,然后通过set()方法放开 namespace waithandler { class Program { //static EventWaitHandle ...

  5. neo4j遍历和图算法

    阅读更多 这篇blog主要和大家分享一下neo4j中是如何对节点进行遍历,和其中集成的图论的一些常用算法. 遍历 http://docs.neo4j.org.cn/tutorials-java-emb ...

  6. homebrew长时间停在Updating Homebrew 这个步骤

    在国内的网络环境下使用 Homebrew 安装软件的过程中可能会长时间卡在 Updating Homebrew 这个步骤. 例:执行 brew install composer 命令 ➜ ~ brew ...

  7. 洛谷P1978 集合 [2017年6月计划 数论08]

    P1978 集合 题目描述 集合是数学中的一个概念,用通俗的话来讲就是:一大堆数在一起就构成了集合.集合有如 下的特性: •无序性:任一个集合中,每个元素的地位都是相同的,元素之间是无序的. •互异性 ...

  8. Javascript-选择器集合调用方法

    <script type="text/javascript"> function uu(namePd) { //判断id var reId = new RegExp(/ ...

  9. 传统保险企业基于 Dubbo 的微服务实践

    本文整理自中国人寿保险(海外)股份有限公司深圳中心技术总监家黄晓彬在 Dubbo 社区开发者日深圳站的现场分享. 中国人寿保险(海外)股份有限公司负责香港.澳门.新加坡和印尼的业务开发,和国内业务不同 ...

  10. C++ Socket 获取本机可用端口号（QT）

    :加载套接字库,创建套接字(WSAStartup()/socket()): :绑定套接字到一个IP地址和一个端口上(bind()): :将套接字设置为监听模式等待连接请求(listen()): :请求 ...