如何利用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!!!

最新文章

  1. ASP.NET Misconfiguration: Excessive Session Timeout
  2. Arcgis for android 离线查询
  3. C++字符串(String)
  4. PHP_string
  5. C#中string.Format()和ToString()格式化方法
  6. HDU 1074 Doing Homework (状态压缩 DP)
  7. 【转】基于Qt, TUIO和TSLIB的嵌入式Linux下的多点触摸设计
  8. 利用HttpOnly来防御xss攻击
  9. Docker学习系列(三)Docker搭建gitlab的两种方式
  10. 【Appium自学】Appium [安装包] Appium 官方文档(转发)
  11. windows7安装flask-mysqldb遇到的坑
  12. The Usage of Lambda and Heap in the C++ STL
  13. [java初探05]__数组的简单认识及Arrays类的常用方法
  14. Spark笔记(一):错误总结
  15. Python自定义状态码枚举类
  16. drools7 (一、最简单的例子)
  17. 【洛谷 T47488】 D:希望 (点分治)
  18. ORACLE_TRIGGER
  19. scheduler configuration options
  20. 获取安装的apk应用信息

热门文章

  1. k8s-分布式系统架构master-worker
  2. think php框架接入微信支付中需要注意的问题(php 小白适用)
  3. 看了这本基础教程的书籍你还担心你的python学不好吗?
  4. [BOM] 封装一下cookie
  5. iOS开发之各机型屏幕大小与键盘高度整理
  6. chrome驱动版本与python不一致时
  7. Elasticsearch使用示例
  8. 记录一次阿里云ECS搭建代理服务器的过程
  9. Route路径
  10. SQL server自动创建日历表。