前端学习-对一段文字进行查找、截取、切割

效果

1. 查找（找到原文中对应的输入内容并改变其颜色）
   
   
2. 截取（找到输入的文字显示在下方并删除原文中的内容）
   
   
3. 切割（根据输入内容切割原文，逐句显示）
   
   

html标签

		<p id="paragraph">站在户外,轻轻的嘘一口气,一团白雾裹着一份温暖袅袅升空,在半空中伸展,氤氲,半晌又汇入了干冷的空气。刚刚燃起的一点希望有破灭了,消失得轻悄而又平静,仿佛从来就不曾有过,又恍惚有过这末一份特别的湿润。小苗长成大树,到了冬天便成了老树,老树枝桠交错,只有几片稀稀落落的叶子点缀着生命的痕迹。树皮微现焦黄,仿佛在火上烤了许久,煎熬的失了神采,半卷曲着好像随时都会坠地。</p>
		<div class="form" id="form">
			<div class="form-group">
				<input class="form-input" id="search" type="text" placeholder="请输入需要查找的字符">
				<button class="btn" onclick="search()">查找</button>
			</div>
			<div class="form-group">
				<input class="form-input" id="select" type="text" placeholder="请输入需要截取的内容">
				<button class="btn" onclick="select()">截取</button>
			</div>
			<div class="form-group">
				<input class="form-input" id="cut" type="text" placeholder="请输入切割关键字符">
				<button class="btn" onclick="cut()">切割</button>
			</div>
		</div>
		<p id="show" style="color: #5E5E5E;"> </p>

js代码

		<script>
			//查找
			function search() {
				var text = document.getElementById("paragraph").innerHTML;
				var sh = document.getElementById("search").value;
				var start = text.indexOf(sh); //获得字符串的开始位置
				var shresult = text.substring(start, start + sh.length); //截取字符串
				text = text.replace(shresult, '<span style="color:#E83E8C">' + shresult + '</span>');//替换文本内容
				document.getElementById("paragraph").innerHTML = text;
			}
			//截取
			function select() {
				var text = document.getElementById("paragraph").innerHTML;
				var st = document.getElementById("select").value;
				var start = text.indexOf(st); //获得字符串的开始位置
				var stresult = text.substring(start, start + st.length); //截取字符串
				text = text.replace(stresult, "");
				document.getElementById("paragraph").innerHTML = text;
				document.getElementById("show").innerHTML = stresult;
			}
			// 切割
			function cut() {
				var text = document.getElementById("paragraph").innerHTML;
				var ct = document.getElementById("cut").value;
				var ctre = text.split(ct);
				for (i = 0; i < ctre.length; i++) {
					document.getElementById("show").innerHTML += ctre[i] + '</br>';
				}
			}
		</script>

css

#paragraph,#show {
	font-size: 18px;
	font-family: MFYanSong_Noncommercial;
	font-weight: 400;
	line-height: 30px;
	padding: 10px;
}


.form {
	position: fixed;
	left: 20px;
	top: 140px;
	color: white;
	width: 500px;
	line-height: 40px;
}


.form-input {
	width: 250px;
	color: #000000;
	font-weight: 100;
	border: none;
	background: none;
	outline: none;
	padding: 5px;
	font-size: 13px;
}


.btn {

	width: 60px;
	height: 28px;
	background: rgba(0, 143, 213, 1);
	border: 1px solid rgba(0, 142, 216, 1);
	border-radius: 3px;
	color: #FFFFFF;
	font-size: 6px;
	font-family: Microsoft YaHei;
	cursor: pointer;
}


input:-webkit-autofill {
	box-shadow: 0 0 0px 1000px white inset !important;
}

#show{
	position: absolute;
	top:250px
}