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 字符串而生成的。