I am using cheerio to perfom some html manipulation on node js server .I have an html string like this
var htmlString =" <ol>
<li>
<p>item1</p>
</li>
<li>
<p>item2</p>
</li>
<li>
<p>item 3</p>
</li>
<li>
<p>item 4</p>
</li>
</ol>
<p>First paragraph</p>
<p>second paragraph</p>
<p>Third paragraph</p>
"
var $ = cheerio.load(htmlString);
var dummy = $("<div></div>")
var item = dummy.append($("*").slice(0,3).clone()).html();
The output returned is
<ol>
<li>
<p>item1</p>
</li>
<li>
<p>item2</p>
</li>
<li>
<p>item 3</p>
</li>
<li>
<p>item 4</p>
</li>
</ol>
<li>item1</li>
<p>item1</p>
The output that I expect is the ordered list followed byparagraph1 followed by paragraph2
Am I doing something wrong or is this a bug in cheerio?
After fiddling with the code for the entire day I finally got the solution. Apparently I was loading the html fragment incorrectly. This worked for me
var $ = cheerio.load();
var dummy = $("<div></div>")
var item = dummy.append($(htmlString).slice(0,3)).html();
Related
I'm trying to get li elements where the header is 'What I want'
This is my Code:
let wants = []
$$('li').each((wantIdx, wantElement) => {
const want= $(relatedArticleElement).text()
wants.push(want)
})
and this is the HTML i'm trying to parse from:
<div class="side-list-panel">
<h4 class="panel-header">What I Want</h4>
<ul class="panel-items-list">
<li>
1
</li>
<li>
2
</li>
<li>
3
</li>
<li>
4
</li>
<li>
5
</li>
</ul>
</div>
<div class="side-list-panel">
<h4 class="panel-header">What I don't want</h4>
<ul class="panel-items-list">
<li>
a
</li>
<li>
b
</li>
<li>
c
</li>
<li>
d
</li>
<li>
e
</li>
</ul>
</div>
this code gets me every single li elements in the page obviously, is there any way i can only get the lis under the 'What I Want' panel-header?
You can get those with:
$('h4:contains("What I Want") + ul li').get().map(li => $(li).text())
You can try JQuery's contains if Cheerio supports it Example $('td:contains("male")')
wondering how to target the "Switch" text on the below html:
<div class="product_title">
<a href="/game/pc/into-the-breach" class="hover_none">
<h1>Into the Breach</h1>
</a>
<span class="platform">
<a href="/game/pc">
PC
</a>
</span>
</div>
<div class="product_data">
<ul class="summary_details">
<li class="summary_detail publisher" >
<span class="label">Publisher:</span>
<span class="data">
<a href="/company/subset-games" >
Subset Games
</a>
</span>
</li>
<li class="summary_detail release_data">
<span class="label">Release Date:</span>
<span class="data" >Feb 27, 2018</span>
</li>
<li class="summary_detail product_platforms">
<span class="label">Also On:</span>
<span class="data">
Switch </span>
</li>
</ul>
</div>
so far I am capturing the "Also On:" text as well (with a lot of spaces) with this code:
self.playable_on_systems_label.setText(self.html_soup.find("span", class_='platform').text.strip() + ', ' + self.html_soup.find("li", class_='summary_detail product_platforms').text.strip())
how do I capture (in this case) only the "Switch" text?
FYI - for the first half of the statement (capturing the "PC") text works fine just not the "also on" text
Thanks in advance,
Your query is getting the entire span element with class="summary_detail product_platforms", which is going to include all the text starting from "Also On:" until "Switch." Try something like .find('a', href=re.compile("^.+switch.+$")) or alternately (using CSS) .select("a[href*=switch]") (solution from here)
you can use BeautifulSoup select() function to navigate the the "Switch" text, check this code!!!
rom bs4 import BeautifulSoup
html = '''<div class="product_title">
<a class="hover_none" href="/game/pc/into-the-breach">
<h1>Into the Breach</h1>
</a>
<span class="platform">
<a href="/game/pc">
PC
</a>
</span>
</div>
<div class="product_data">
<ul class="summary_details">
<li class="summary_detail publisher">
<span class="label">Publisher:</span>
<span class="data">
<a href="/company/subset-games">
Subset Games
</a>
</span>
</li>
<li class="summary_detail release_data">
<span class="label">Release Date:</span>
<span class="data">Feb 27, 2018</span>
</li>
<li class="summary_detail product_platforms">
<span class="label">Also On:</span>
<span class="data">
<a class="hover_none" href="/game/switch/into-the-breach">Switch</a> </span>
</li>
</ul>
</div>'''
soup = BeautifulSoup(html, 'html.parser')
text = soup.select('.summary_detail.product_platforms .hover_none')[0].text.strip()
print(text)
Output:
Switch
I'm trying to get the nested list working in Thymeleaf. I have tried not nesting the list and the entry.value works. However when I start nesting it, it doesnt show up in the webpage. Students is a Map<String, ArrayList<String>>.
<ul th:each="entry : ${students}">
<li th:text="${entry.key}">
<ul>
<li th:text="${entry.value[0]}"></li>
<li th:text="${entry.value[1]}"></li>
<li th:text="${entry.value[2]}"></li>
</ul>
</li>
</ul>
Currently it looks like this.
th:text attributes replace all any child html elements with the contents of the th:text expression. You have to move the th:text into it's own tag, something like this:
<ul th:each="entry: ${students}">
<li>
<span th:text="${entry.key}" />
<ul>
<li th:text="${entry.value[0]}" />
<li th:text="${entry.value[1]}" />
<li th:text="${entry.value[2]}" />
</ul>
</li>
</ul>
I'm writing an react project, and I want to require imgs src dynamically in jsx render, just like this:
return (
<li className="grid">
<a href={category.url}>
<div className="image-wrapper">
<img className="logo" src={require(category.imgSrc)}/> // !!here
</div>
<span className="title">{category.name}</span>
</a>
</li>
)
//category.imgSrc is like "../../images/01_taxi.png"
however, I got the error:
Uncaught Error: Cannot find module '../../../01_shunfengche.png'.
so, I try the require.context like this
var requireContext = require.context("../../../images/",false,/\.png$/);
var imgsrc = requireContext("01_taxi.png");
return (
<li className="grid">
<a href={category.url}>
<div className="image-wrapper">
<img className="logo" src={imgsrc}/>
</div>
<span className="title">{category.name}</span>
</a>
</li>
)
it still doesn't work, can anyone help me ?
finally,i tried this:
var requireContext = require.context("../../../images",false,/\.png$/);
var that = this;
var lis = this.props.data.map(function(category,index){
var imgsrc = requireContext("./"+category.img); //here!
return (
<li className="grid" data-value={category}>
<a href={category.url}>
<div className="image-wrapper">
<img className="logo" src={imgsrc}/>
</div>
<span className="title">{category.zh_name}</span>
</a>
</li>
)
});
write the correct path really does matter.
I have a menu, one menu item looking like this:
<li>
LINK TITLE
</li>
And I want this:
<li>
<a href="aaa">
<div class="custom">LINK TITLE</div>
</a>
</li>
Or this:
<li>
<div class="custom">
LINK TITLE
</div>
</li>
How can I do this?
This works:
function theme_menu_link(array $variables) {
$variables['element']['#localized_options']['html'] = true;
$variables['element']['#title'] = '<div class="custom">' . $variables['element']['#original_link']['link_title'] . '</div>';
return theme_menu_link($variables);
}