Comments (6)
@1984204066 Hi, thx for the issue, i don't know the original html you used in this case, so i used the following code and had a try.
let html = r#"
<div id="content">
<img data-src="img/1-png?wx_fmt=png" />
<img data-src="img/2-jpg?wx_fmt=jpg" />
</div>
"#;
let root = Vis::load(html).unwrap();
let mut content = root.find("#content");
fn get_images(content: &mut Elements, no: &str) {
content.find("img").for_each(|idx, img| {
if let Some(src) = img.get_attribute("data-src") {
let src = src.to_string();
let re = Regex::new("wx_fmt=([^&]*)").unwrap();
if let Some(cap) = re.captures(&src) {
if let Some(fmt) = cap.get(1) {
let ext = fmt.as_str();
let fname = format!("{no}-{idx}.{ext}");
let new_img = format!("<img src='./img/{fname}' />");
let mut new_img = Vis::load(&new_img).unwrap();
Vis::dom(img).replace_with(&mut new_img);
}
}
}
true
});
}
get_images(&mut content, "abc");
println!("{}", root.outer_html());
the above code will ouput:
<div id="content">
<img src='./img/abc-0.png' />
<img src='./img/abc-1.jpg' />
</div>
Here are some things should explain:
- the
set_html
method is set the element'sinner_html
,img
is a void element, soset_html
will make no affect to it's ownhtml
. - so you should use
replace_with
, and thereplace_with
method will replace its parent'shtml
with the new html by using theset_html
method, but here is a limitation: the document-fragement root element can't useset_html
method, maybe it's a issue should be fixed.
I hope it will fix your issue, any problem you can continue comment in this issue. thx again!
from visdom.
from visdom.
Yes use Vis::dom(img).replace_with(&mut new_img); works, great thanks.
Though
println!("1. {}", img.outer_html());
still output old value, ofcourse it still reasonable, because we can think calling Vis::dom changes the dom, not img itself.
But if i call this way:
let mut new_img = Vis::load(new_img).unwrap();
let it = new_img.get_ref().iter().next().unwrap();
println!("{}", it.as_ref().outer_html());
img.replace_with(it); // takes effect after leave for_each. Delayed
println!("1. {}", img.outer_html()); // output old value.
When you leave the for_each, the content changed, this means img.replace_with(it) is correct.
My question is should I expect the img.replace_with(it); should take effect immediately, so println!("1. {}", img.outer_html()); should print new value?
Of course the delayed effect of img.replace_with(it) not bother me, but from semantic meaning it should take effect immediately I think.
from visdom.
@1984204066 I understand what you mean, the replace_with
method can replace the element with not only one target elements, so it will only change the parent element but not itself, consider most people will only replace one element to another, and from the semantic, maybe it's useful to change itself too. later i will publish a new version to support it. thx your advice!
from visdom.
@1984204066 the new version v0.5.9 has published, you can have a try~
from visdom.
from visdom.
Related Issues (20)
- error: failed to get `mesdoc` as a dependency of package `visdom v0.1.4 HOT 1
- How to remove a DOM element? HOT 6
- No problem, my bad :(
- Please add support for html method for all elements HOT 5
- Navigating sideway with `find` method HOT 2
- 这么好的项目为什么这么少人知道? HOT 1
- 不可用 HOT 2
- `rphtml` and `htmlentities` APIs changed HOT 3
- Stripping class entirely HOT 2
- Does this support xpath selectors ? HOT 4
- 带:冒号的怎么解析? HOT 9
- 缺少类似jquery的clone HOT 6
- `Vis::load`返回的结果应该自动选中root元素 HOT 2
- 内存泄漏 HOT 6
- 如何获取节点的tag name(节点名称)? HOT 3
- 将`Result<Elements, Box<dyn Error>>` 改为`Result<Elements, Box<dyn Error + Send>>` HOT 2
- 是否有更好的方式获取 select 元素的值? HOT 4
- Opposite of .has() HOT 4
- doc.find("p:contains('好用')" panicked, only when Chinese characters appear in contains() HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from visdom.