如下面代码运行后：在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>
用正则表达式提取a标签,并删除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">
</textarea>
<br><br>
<table id="tab">
<tr><th>文本内容</th><th>链接</th></tr>
</table>
<script type="text/javascript">
var btn=document.getElementById('btn');
var text2=document.getElementById('text2');
btn.onclick=function (){
var s=document.getElementById('text1').value;
var arr = [];
var str = "";
var str2 = "<tr><th>文本内容</th><th>链接</th></tr>";
s.replace(/<a [\s\S]*?href="([\s\S]*?)"[\s\S]*?>([\s\S]*?)<\/a>/g,function (s,a,b) {
b = b.replace(/<\/?\w+[\s\S]*?>/g,"").replace(/^\s+|\s+$/g,"");
str += b + " " + a + "\n";
str2 += "<tr><td>"+b+"</td><td><a href='"+a+"'>"+a+"</a></td></tr>";
});
text2.value=str;
document.querySelector("#tab tbody").innerHTML=str2;
}
</script>
<style>
table,tr,th,td{border:1px solid #333;border-collapse:collapse;}
</style>
先把a标签替换成指定字符，然后正则替掉所有html标签，然后在把指定字符替换a标签
tempStr = tempStr.replace(/(<([^>]+)>)/ig,"").replace(/[\r\n]/g,""); //去除所有html标签<></>.去除所有换行符。