如下面代码运行后:在js处理部分,如何对文本域输入的html代码进行正则处理,去除其他标签,只输出a标签的文本和链接,另外也在表格中显示一份结果。
<textarea id="text1" rows="10" cols="50">
<!--文本域输入的内容-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>测试网页</title>
</head>
<body>
<ul>
<li>
<a class="js-task-item-link" href="https://www.aaa.com/111">
<div class="title">
<h5 class="title-text">我是文本内容1</h5>
</div>
</a>
</li>
<li>
<a class="js-task-item-link" href="https://www.bbb.com/222">
<div class="title">
<h5 class="title-text">我是文本内容2</h5>
</div>
</a>
</li>
<li>
<a class="js-task-item-link" href="https://www.ccc.com/333">
<div class="title">
<h5 class="title-text">我是文本内容3</h5>
</div>
</a>
</li>
<li>
<a class="js-task-item-link" href="https://www.ddd.com/444">
<div class="title">
<h5 class="title-text">我是文本内容4</h5>
</div>
</a>
</li>
</ul>
</body>
</html>
<!--文本域输入的内容-->
</textarea>
<br><br>
<input type="button" id="btn" value="开始处理">
<br><br>
<textarea id="text2" rows="10" cols="50">
<!--输出的内容-->
我是文本内容1 https://www.aaa.com/111
我是文本内容2 https://www.aaa.com/222
我是文本内容3 https://www.aaa.com/333
我是文本内容4 https://www.aaa.com/444
<!--输出的内容-->
</textarea>
<br><br>
<table>
<tr><th>文本内容</th><th>链接</th></tr>
<tr><td>我是文本内容1</td><td>https://www.aaa.com/111</td></tr>
<tr><td>我是文本内容2</td><td>https://www.aaa.com/222</td></tr>
<tr><td>我是文本内容3</td><td>https://www.aaa.com/333</td></tr>
<tr><td>我是文本内容4</td><td>https://www.aaa.com/444</td></tr>
</table>
<script type="text/javascript">
var btn=document.getElementById('btn');
var s=document.getElementById('text1').innerHTML;
var text2=document.getElementById('text2');
btn.onclick=function (){
text2.value=s;
}
</script>
<style>
table,tr,th,td{border:1px solid #333;border-collapse:collapse;}
</style>