如何利用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. pycharm软件基本使用python语法的注释变量的使用常量的使用变量的命名规范python的优化垃圾回收机制数据类型

    pycharm软件基本使用 1.pycharm基本的使用方法:1.点击file找到settings(设置)打开Appearance&Behavior点击Appearance看theme这个就是 ...

  2. 关于浏览器缓存造成的bug解决方法(页面跳转缓存,刷新生效)

    1.在执行操作时带上一个随机数/时间戳,表示每一次的都是独一无二的

  3. Nodejs杀死本地应用(win)

    windows端nodejs检查应用运行并杀死. import {exec, execSync} from "child_process" import {decode} from ...

  4. go项目,出现too many open files

    刚开始碰到这种异常,以为是代码写的有问题,准备抽时间去改,等有时间正式此问题的时候,发现这种问题一般只会在linux系统上出现,原因如下:linux系统限制了文件打开的最大文件句柄数,系统默认一般是1 ...

  5. ALBERT论文简读

    问题描述 预训练自然语言表征时,增加模型的参数量通常可以是模型在下有任务中性能提升.但是这种做法对硬件设备的要求较高(当下的各种SOTA模型动辄数亿甚至数十亿个参数,倘若要扩大模型规模,这个内存问题是 ...

  6. vim 小记录

    将str1批量替换成str2 , 特殊符号前用转译符 \ :%s/str1/str2/g

  7. MATH1851 Calculus and ordinary differential equations

    课程内容笔记,自用,不涉及任何 assignment,exam 答案 Notes for self use, not included any assignments or exams 由于提前预习了 ...

  8. 【QT+MSVC2015】不安装VS2015,QT配置MSVC2015编译环境

    本文介绍不安装VS2015的情况下在QT5.10中配置MSVC2015编译器. 系统:windows系统 QT版本:5.10.1 所需文件: QT安装程序--qt-opensource-windows ...

  9. HTML&CSS学习总结

    目录 一. HTML学习总结 1.HTML是什么 2.HTML结构 1. 创建一个HTML实例 2. HTML结构解析 3. HTML标题 4. HTML段落 5. HTML链接 6. HTML图像 ...

  10. 「SOL」Quick Tortoise (Codeforces)

    只能说没想到 题面 给出一个 \(n\times m\) 的网格图,每个格子要么是空地要么是障碍. 给出 \(q\) 个询问,每次给出 \((sx, sy),(ex,ey)\),问从 \((sx,sy ...