Jquery 如何替换html字符串中标签属性值 ??

如何利用JQuery 替换HTML字符串中的属性值呢?

如 html 字符串有很多 img标签,现在需要修改 img的src值

复制代码
var html="<div style="text-align:center;font-size:40px;font-family:'方正小标宋简体'">  期末测试</div>
        <p class="title" id="ab"> 一、选择题(共 20 题)</p>
            <div>
                <p>1.下列软件中可以查看WWW信息的是______。 23</p>
<p><img src="../UploadFiles/defa43e0-f176-407e-a44b-6c46af9ad04c.jpg" alt="" width="400" height="225"></p>
<p>&nbsp;</p>
            </div>
            <div>
                A.游戏软件<img src="../UploadFiles/0440377a-5fa2-41fe-813c-e1ead615da16.JPG" alt="" width="163" height="204"> &nbsp;&nbsp; B.财务软件 &nbsp;&nbsp;  C.杀毒软件 &nbsp;&nbsp;  D.浏览器软件
            </div>
            <div>
                <p>2.在拨号入网时,______不是必备的硬件。</p>
<p><img src="../UploadFiles/88fef814-5140-4ea5-b4b2-7fdeacda8c22.jpg" alt="" width="425" height="283"></p>
            </div>
            <div><img src="../UploadFiles/be7d51d8-5a2f-4f6d-9cdf-32517386934e.jpg" alt="" width="300" height="400"> </div>";
复制代码

如何替换呢? 以下代码理论上可以,但实际不能替换变量 html 字符串中的 dom元素,因为以下操作方式并不是引用传值。只有将操作的字符串变成对象才能发生实际改变。

一、理论上修改方式

复制代码
 var html = $("#qst").html();
           
           var s= $("img",html).attr("src") 
            $("img", $(html)).each(function (a, b) {
                var pos = $(this).attr('src').indexOf("/");
                s = $(this).attr('src').substring(pos);
               var newImg= $(this).attr('src', "../wwwroot/" + s);
                $(this).replaceWith("<img src='" + "../wwwroot/" + s+"' />");
                console.log($(this));
            });
            alert(html);
复制代码

二、实际修改方式

废话不说上代码:

复制代码
  var html = $("#qst").html();
            alert(html);
            var $html = $('<div />', { html: html });//关键点 将html字符串转换成 JavaScript 对象。 
            
            $html.find("img").each(function () {
                var pos = $(this).attr('src').indexOf("/");
                s = $(this).attr('src').substring(pos);
                var newImg = $(this).attr('src', "../wwwroot/" + s);                 
            });
            alert($html.html());
复制代码

请看调用前

 

 

调用后:

 

 


    可以看到,Img 标签的所有 src 值 均发生改变。

end!!!    
       

 

posted on   码农at突泉  阅读(213)  评论(0编辑  收藏  举报

相关博文:
阅读排行:
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· 没有Manus邀请码?试试免邀请码的MGX或者开源的OpenManus吧
· 【自荐】一款简洁、开源的在线白板工具 Drawnix
· 园子的第一款AI主题卫衣上架——"HELLO! HOW CAN I ASSIST YOU TODAY
· Docker 太简单,K8s 太复杂?w7panel 让容器管理更轻松!
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

统计

点击右上角即可分享
微信分享提示