专栏首页前端の进行时js搜索关键字(Ctrl + F)

js搜索关键字(Ctrl + F)

<!-- 搜索框 -->
<div class="form-inline my-2 my-lg-0">
    <input class="form-control mr-sm-2" type="text" placeholder="Search">
    <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
</div>

<!-- 文本内容 -->
<div class="jumbotron">
    <h1 class="display-3">流浪地球</h1>
    <p class="lead">近未来,科学家们发现太阳急速衰老膨胀,短时间内包括地球在内的整个太阳系都将被太阳所吞没。为了自救,人类提出一个名为“流浪地球”的大胆计划,即倾全球之力在地球表面建造上万座发动机和转向发动机,推动地球离开太阳系,用2500年的时间奔往另外一个栖息之地。中国航天员刘培强(吴京
        饰)在儿子刘启四岁那年前往国际空间站,和国际同侪肩负起领航者的重任。转眼刘启(屈楚萧 饰)长大,他带着妹妹朵朵(赵今麦 饰)偷偷跑到地表,偷开外公韩子昂(吴孟达
        饰)的运输车,结果不仅遭到逮捕,还遭遇了全球发动机停摆的事件。为了修好发动机,阻止地球坠入木星,全球开始展开饱和式营救,连刘启他们的车也被强征加入。在与时间赛跑的过程中,无数的人前仆后继,奋不顾身,只为延续百代子孙生存的希望……
    </p>
    <hr class="my-4">
</div>
var inputKeyword = document.getElementsByTagName('input')[0];
var btnSearch = document.getElementsByTagName('button')[0];
var text = document.getElementsByClassName('lead')[0];

btnSearch.onclick = function () {
    var keyword = inputKeyword.value;
    if (!keyword) {
        return;
    }
    var textSplit = text.innerHTML.split(keyword);
    text.innerHTML = textSplit.join('<span class="keywordBg">' + keyword + '</span>');
}
// 敲黑板(知识点)
// 1. innerHTML 设置或返回开始和结束标签之间的 HTML。

// 2. value
// value 属性可设置或者返回文本域的 value 属性值。
// value 属性包含了默认值或用户输入的值(或通过脚本设置)。

// 3. split() 方法用于把一个字符串分割成字符串数组。
var testString = "The Wandering Earth";

// 空字符串
var resultNull = testString.split("");
console.log(resultNull); // 每个字符之间都会被分割
// (19) ["T", "h", "e", " ", "W", "a", "n", "d", "e", "r", "i", "n", "g", " ", "E", "a", "r", "t", "h"]

// 存在的字符串
var resultHave = testString.split("W");
console.log(resultHave);
// (2) ["The ", "andering Earth"]

// 不存在的字符串
var resultNo = testString.split("z");
console.log(resultNo);
// ["The Wandering Earth"]

// 4. arrayObject.join(separator) 把数组中的所有元素放入一个字符串
// separator 可选。指定要使用的分隔符。如果省略该参数,则使用逗号作为分隔符。
// 返回一个字符串。该字符串是通过把 arrayObject 的每个元素转换为字符串,然后把这些字符串连接起来,在两个元素之间插入 separator 字符串而生成的。

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Vue.js入门教程-组件注册

    创建Vue的组件都有三个基本步骤是 【①创建组件构造器、②注册组件和③使用组件】。

    WEBING
  • Vue.js入门教程-methods

    (2)但如果需要根据某些规则或逻辑输出数据呢?在这种情况下,我们可以通过 Vue.js 中的计算属性实现。

    WEBING
  • JavaScript-数据类型

    true 和 1 比较是相同,false 和 0 比较是相同(是 “==” 比较),因为内部会实现数据类型转化,将 true 转换成 1,将 false 转换成...

    WEBING
  • 「面试」小红书之旅

    项目被问的差不多了,开始怼基础知识,基础知识老四套,计算机网络,数据库,操作系统,数据结构(来吧,时刻准备着,真没吹牛逼)

    我是程序员小贱
  • thinkPHP框架实现的简单计算器示例

    本文实例讲述了thinkPHP框架实现的简单计算器。分享给大家供大家参考,具体如下:

    砸漏
  • 编程范式 —— 函数式编程入门

    该系列会有 3 篇文章,分别介绍什么是函数式编程、剖析函数式编程库、以及函数式编程在 React 中的应用,欢迎关注我的 blog

    牧云云
  • MongoDB中MapReduce使用

    玩过Hadoop的小伙伴对MapReduce应该不陌生,MapReduce的强大且灵活,它可以将一个大问题拆分为多个小问题,将各个小问题发送到不同的机器上去处理...

    江南一点雨
  • 统计学 常用的数据分析方法大总结!

    描述统计是通过图表或数学方法,对数据资料进行整理、分析,并对数据的分布状态、数字特征和随机变量之间关系进行估计和描述的方法。描述统计分为集中趋势分析和离中趋势分...

    石晓文
  • 隐私信息与用户画像

    隐私信息与用户画像 隐私是一种与公共利益、群体利益无关,当事人不愿他人知道或他人不便知道的个人信息,当事人不愿他人干涉或他人不便干涉的个人私事,以及当事人不愿他...

    企鹅号小编
  • 统计学 常用的数据分析方法大总结,推荐收藏

    描述统计是通过图表或数学方法,对数据资料进行整理、分析,并对数据的分布状态、数字特征和随机变量之间关系进行估计和描述的方法。描述统计分为集中趋势分析和离中趋势分...

    double

扫码关注云+社区

领取腾讯云代金券