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

Jquery 如何替换html字符串中标签属性值 ??的更多相关文章

  1. 获取xml字符串中的属性值

    pagexml = @"<?xml version='1.0' encoding='utf-8'?> <DATAPACKET Version='2.0'> <M ...

  2. 【JS新手教程】replace替换一个字符串中所有的某单词

    JS中的replace方法可以替换一个字符串中的单词.语句的格式是: 需要改的字符串.replace(字符串或正则表达式,替换成的字符串) 如果第一个参数用字符串,默认是找到该字符串中的第一个匹配的字 ...

  3. 【Python】获取翻页之后的各页面中的属性值。

    如何获取翻页之后的页面中的html标签中的属性值? # coding=utf-8 from selenium import webdriver if __name__=="__main__& ...

  4. <s:property="a" value=""/>取的<s:debug></s:debug>中的value stack中的属性值

    <s:property="a"  value=""/>取的<s:debug></s:debug>中的value stack中 ...

  5. 将source类中的属性值赋给target类中对应的属性

    /** * 对象的属性值拷贝 * <p> * 将source对象中的属性值赋值到target对象中的属性,属性名一样,类型一样 * <p> * example: * <p ...

  6. Spring中使用@Value读取porperties文件中的属性值方法总结及注意事项

    本文为博主原创,转载请注明出处. 此前曾总结过使用工具类读取properties文件中的属性值,有兴趣的可以看一下. 如何快速获取properties中的配置属性值:https://www.cnblo ...

  7. jquery 取子节点及当前节点属性值

    分享下jquery取子节点及当前节点属性值的方法. <li class="menulink"><a href="#" rel="ex ...

  8. ajax取到数据后如何拿到data.data中的属性值

    今天遇到的ajax取到数据后如何拿到data.data中的属性值的问题 比如拿到了数据 我要取出data中的name 题外话:当然取名最好别取什么奇怪的xiaobi

  9. Implement Property Value Validation in the Application Model 在应用程序模型中实现属性值验证

    In this lesson, you will learn how to check whether or not a property value satisfies a particular r ...

  10. js和jquery通过this获取html标签中的属性值

    <html> <head> <script type="text/javascript" src="jquery-1.10.2.min.js ...

随机推荐

  1. 面试笔记1-redis

    1.什么是RDB? RDB实际上是Redis的一种数据持久化机制.它每隔一段时间就会把内存中的数据写入到磁盘中的临时文件,作为快照,宕机重启之后,就会把rdb文件读取到内存中去,就可以恢复数据. 2. ...

  2. '大龄‘后端程序员,快速捡起ECMAScript6

    1.Promise 2.迭代器 3.async 4.module 5. this的理解

  3. Head_First_Python(中文版)值得花时间读的一本书

    Head_First_Python(中文版)书籍免费下载 提取码:u6z5 内容简介  · · · · · · 你想过可以通过一本书就学会Python吗?<Head First Python(中 ...

  4. Django,Flask中的request

    request的结构获取 class Upload(Resource): def post(self): print(curPath) print(request.files['file'].__di ...

  5. 阿里云服务器 jdk1.8 安装配置

     阿里云服务器 jdk1.8 安装配置 下载/上传 jdk安装包 解压到指定目录 重命名解压后的文件夹名称 配置环境变量 验证JAVA环境是否安装成功 step 0.安装包准备 1 wget --no ...

  6. go iris框架文件上传下载

    在 Iris 框架中,可以使用内置的 iris 包中的 Context 对象来处理文件上传和下载.以下是一个简单的示例代码: package main import ( "github.co ...

  7. [服务器]Windows Server 2008 64位1核1G安装SQL Server2008

    本文为原创文章,转载请注明出处!我的博客地址:http://www.cnblogs.com/txwd 这台服务器是2017年初买的,那时候1核1G,3年要1500.不过现在便宜了,2核4G,3年也就1 ...

  8. [SQL Server]储存过程中使用临时表循环操作数据

    本文为原创文章,转载请注明出处!我的博客地址:http://www.cnblogs.com/txwd 由于工作原因,到目前为此已有一年多没有写SQL Server的储存过程了,已有些生疏.日前工作中有 ...

  9. 网页识别语音插件annyang可以实现识别中文

    <html> <script src="a.js"></script> <script> if (annyang) { var co ...

  10. VMware Workstation Ubuntu 20.04 LTS无法连接网络问题

    本文记录了自己使用的安装在VMware Workstation上的Ubuntu20.04无法连接到网络的解决过程--终于解决困扰我两个小时的问题 出现问题# 毫无征兆,平时使用正常的Ubuntu在今天 ...