js搜刮关键字(Ctrl + F)

2019年8月31日 200次阅读 来源: WEBING

《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年的时候奔往别的一个栖息之地。中国航天员刘培强（吴京
        饰）在儿子刘启四岁那年前去国际空间站，和国际同侪肩负起领航者的重担。转眼刘启（屈楚萧 饰）长大，他带着mm朵朵（赵今麦 饰）偷偷跑到地表，偷开外公韩子昂（吴孟达
        饰）的运输车，效果不仅遭到拘系，还遭受了环球发动机停摆的事宜。为了修睦发动机，阻挠地球坠入木星，环球最先睁开饱和式救援，连刘启他们的车也被强征到场。在与时候竞走的过程当中，无数的人前赴后继，不屈不挠，只为连续百代子孙生计的愿望……
    </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>');
}

《js搜刮关键字(Ctrl + F)》

// 敲黑板(知识点)
// 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 字符串而天生的。
    原文作者：WEBING
    原文地址: https://segmentfault.com/a/1190000018260716
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞