爱学习的小朋友 2022-05-19 18:47 采纳率: 88.9%
浏览 41
已结题

js对HTML代码正则处理问题

如下面代码运行后：在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>
  • 写回答

3条回答 默认 最新

  • CSDN专家-天际的海浪 2022-05-19 18:49
    关注

    用正则表达式提取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>
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论 编辑记录
查看更多回答(2条)

报告相同问题？

问题事件

  • 系统已结题 5月27日
  • 已采纳回答 5月19日
  • 创建了问题 5月19日

悬赏问题

  • ¥15 微信小程序协议怎么写
  • ¥15 c语言怎么用printf（“\b \b”）与getch（）实现黑框里写入与删除？
  • ¥20 怎么用dlib库的算法识别小麦病虫害
  • ¥15 华为ensp模拟器中S5700交换机在配置过程中老是反复重启
  • ¥15 java写代码遇到问题，求帮助
  • ¥15 uniapp uview http 如何实现统一的请求异常信息提示？
  • ¥15 有了解d3和topogram.js库的吗？有偿请教
  • ¥100 任意维数的K均值聚类
  • ¥15 stamps做sbas-insar，时序沉降图怎么画
  • ¥15 买了个传感器，根据商家发的代码和步骤使用但是代码报错了不会改，有没有人可以看看