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 2022-10-23 18:19  码农at突泉  阅读(209)  评论(0编辑  收藏  举报