<!-- 搜索框 --> <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 字符串而生成的。
本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。
我来说两句