2019-03-27获取满足条件的内容并描红结果

<label for="text">内容区</label><br>

<textarea name="" id="text" cols="50" rows="10"></textarea>

<p>

<label for="keywords"></label>关键字:<input type="text" id="keywords" placeholder="支持正则">

<button id="search">搜索</button>

</p>

<div id="result"></div>

<script type="text/javascript">

var btn = document.getElementById('search');

btn.onclick = function(ev){

//获取用户要搜索的关键字,支持正则

var pattern = document.getElementById('keywords').value;

var reg = new RegExp(pattern,'g');

//获取要查询的原始文本

var searchStr = document.getElementById('text').value;

//替换字符串,$&,表示查询到的子字符串

var str = '<span style="color:red">$&</span>';

//将查询结果插入到页面中

document.getElementById('result').innerHTML = searchStr.replace(reg,str);

}