JQuery selector to ignore an element?
JQuery selector to ignore an element?
I am extracting article page content.
One selector, "entry": $('div.content__article-body').html().trim() gets the main article body.
This mostly comprises text paragraphs with their <p> and header tags, which is just what I want.
However, it also gets an element I don't want, which is <aside>.
How can I ensure <aside> is NOT included in the resulting text?
"entry": $('div.content__article-body').html().trim()
<p>
<aside>
<aside>
I have read threads on here about "not".
I have tried things like ...
$('div.content__article-body').not('aside').html().trim()
$('div.content__article-body').html().not('aside').trim()
$('div.content__article-body:not(aside)').html().trim() or $('div.content__article-body:not('aside')').html().trim() - not sure.
$('div.content__article-body:not(aside)').html().trim()
$('div.content__article-body:not('aside')').html().trim()
But none of these seems to work. Am I misforming how to use "not"?
Update: Excerpt below (aside is basically a box-out within the article)...
aside
</figcaption>
</figure>
</header>
<div class="content__article-body from-content-api js-article__body" itemprop="articleBody" data-test-id="article-review-body">
<p>A wise man once <a href="http://www.quora.com/Who-originally-suggested-that-if-youre-not-paying-for-the-product-you-are-the-product" rel="nofollow" data-link-name="in body link" class="u-underline">said</a>: “If you’re not paying for it, you’re the product.” That’s what is happening in the magazine world, as <a href="https://www.theguardian.com/media/2015/jul/06/nme-to-go-free-with-larger-circulation" data-link-name="in body link" class="u-underline">NME abandons its cover price</a> after 63 years, to go free.<br></p>
<p>In doing so, the title is turning its readers from customers in to advertiser targets. But NME is far from the first property to try this trick. <a href="http://articles.baltimoresun.com/1996-11-13/features/1996318156_1_village-voice-schneiderman-circulation" rel="nofollow" data-link-name="in body link" class="u-underline">The Village Voice</a>, the <a href="http://www.britishpapers.co.uk/england-wmids/shrewsbury-chronicle/" rel="nofollow" data-link-name="in body link" class="u-underline">Shrewsbury Chronicle</a>, the <a href="https://news.google.com/newspapers?id=HU1aAAAAIBAJ&sjid=KSgMAAAAIBAJ&pg=1120%2C535142" rel="nofollow" data-link-name="in body link" class="u-underline">Standard</a> of Hong Kong, <a href="https://gigaom.com/2007/10/31/419-friends-reunited-dropping-subscriptions-to-go-free-ad-supported-report/" rel="nofollow" data-link-name="in body link" class="u-underline">Friends Reunited</a>, the <a href="https://gigaom.com/2009/10/02/419-london-evening-standard-bold-re-birth-or-a-free-folly/" rel="nofollow" data-link-name="in body link" class="u-underline">Evening Standard</a>, the <a href="http://www.fulhamsw6.com/default.asp?section=info&spage=common/contrinity001.htm" rel="nofollow" data-link-name="in body link" class="u-underline">Fulham and Hammersmith Chronicle</a>, Time Out in <a href="https://gigaom.com/2008/09/01/419-time-out-seeking-investors-could-go-free-and-beef-up-online/" rel="nofollow" data-link-name="in body link" class="u-underline">London</a> and <a href="http://www.timeout.com/about/time-out-group/latest-news/time-out-new-york-announces-launch-of-its-magazine-to-free-weekly-distribution" rel="nofollow" data-link-name="in body link" class="u-underline">New York</a>, and now <a href="https://www.theguardian.com/media/greenslade/2015/jul/08/the-sun-lowers-its-paywall-allowing-free-access-to-many-stories" data-link-name="in body link" class="u-underline">parts of the Sun’s website</a> are all among those to have dropped their fees in favour of frees.</p>
<p>But what has become of the converts? And what do their fortunes since tell us, <a href="https://www.theguardian.com/music/nme" data-link-name="auto-linked-tag" data-component="auto-linked-tag" class="u-underline">NME</a> and other operators about the key ingredients for a successful switch?</p>
<aside class="element element-rich-link element--thumbnail element-rich-link--not-upgraded" data-component="rich-link" data-link-name="rich-link-1 | 1">
<div class="rich-link">
<div class="rich-link__container">
<div class="rich-link__header">
<h1 class="rich-link__title">Old media's prospects have improved but the new media threat looms large</h1>
</div>
<div class="rich-link__read-more">
<div class="rich-link__arrow">
<span class="inline-arrow-in-circle inline-icon ">
<svg width="24" height="24" viewbox="0 0 24 24" class="inline-arrow-in-circle__svg inline-icon__svg">
<path class="rich-link__arrow-icon" d="M12 0C5.373 0 0 5.373 0 12s5.373 12 12 12 12-5.373 12-12S18.627 0 12 0m.21 19l-.637-.668 4.888-6.326H4.996v-1.01h11.465l-4.888-6.333.637-.668L19 11.153v.685l-6.79 7.157" fill-rule="evenodd"/>
</svg> </span>
</div>
<div class="rich-link__read-more-text">
Read more
</div>
</div>
<a class="rich-link__link u-faux-block-link__overlay" href="https://www.theguardian.com/media-network/2015/mar/20/new-media-threat-buzzfeed-vice" aria-label="Old media's prospects have improved but the new media threat looms large"></a>
</div>
</div>
</aside>
<h2>1. Know your predicament</h2>
<p>It would be nice to say the switch to free comes either out of benevolence or out of a market opportunity. The reality is, operators invariably flick the switch under external pressure of a poor business outlook – no amount of dressing up as a “bold relaunch” can change that.</p>
<p>NME’s circulation was falling by <a href="https://www.theguardian.com/media/2014/feb/13/nme-relaunch-sales-slide-ipc-media" data-link-name="in body link" class="u-underline">around a fifth annually</a>. The Evening Standard was frustrated to find itself far behind national dailies on ad planners’ schedules, locking it out of big brand bucks, according to someone familiar with the strategy to switch.</p>
<p>The Village Voice dropped its cover charge in 1996 after being eaten into by rival New York Press being given away in green sidewalk boxes, while Hong Kong’s Standard newspaper was forced to act when the government removed a decree that listed companies must buy classified ads in newspapers. But the key – as anyone who has heard the “<a href="https://en.wikipedia.org/wiki/Boiling_frog" rel="nofollow" data-link-name="in body link" class="u-underline">boiling frog</a>” allegory will know – is to recognise when it is your time to change tack.</p>
In your selectors your selecting a div that is not
<aside> it's not correct. Is the <aside> tag inside of div.content__article-body ??– Hesan Aminiloo
Jun 30 at 9:53
<aside>
<aside>
div.content__article-body
4 Answers
4
With the .not() method, do like this, expand the selector to div.content__article-body > * so it target the div's siblings, and then loop through the result.
.not()
div.content__article-body > *
div
The usage of the child selector > allow to exclude any elements inside aside though that will also affect the other elements too, and to bring their children back in the output, use .outerHTML.
>
aside
.outerHTML
Stack snippet
$('div.content__article-body > *').not('aside').each( function( index, value ) {
console.log( value.outerHTML );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content__article-body">
<p>some paragraph <span>some span</span></p>
<div>some div</div>
<aside>an aside <div>some div in aside</div></aside>
</div>
And with the :not() selector.
:not()
Stack snippet
$('div.content__article-body > *:not(aside)').each( function( index, value ) {
console.log( value.outerHTML );
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="content__article-body">
<p>some paragraph <span>some span</span></p>
<div>some div</div>
<aside>an aside <div>some div in aside</div></aside>
</div>
Thanks for responses. I am struggling to implement answers, likely due to my own level of Javascript proficiency. My set up works like
result = { "entry": $("jquery_selector_here") }; (multiple exist within result' I'm not sure how to reconcile this with the subsequent value.outerHTML line.– Robert Andrews
2 days ago
result = { "entry": $("jquery_selector_here") };
result
value.outerHTML
@RobertAndrews Could you manually create that object using my above demo code so I better understand the end result. Use e.g. a jsfiddle.net
– LGSon
2 days ago
jsfiddle.net/iamrobertandrews/6p0w1x5k/5 Problems with it as I inserted. I'm not sure the console.log stuff is appropriate in my use case.
– Robert Andrews
2 days ago
@RobertAndrews I think you misunderstood. I would like a sample of the end result, manually created from the code sample I showed above in my answer.
– LGSon
2 days ago
I think that's the problem - I don't understand how to. The three lines of your "not" code don't quite validate in the place I insert them.
– Robert Andrews
2 days ago
You can try something like this:
var e = $('.box').html();
console.log(e);
var subStr = e.match("<aside>(.*?)</aside>");
var r = e.replace(subStr[0], "");
console.log(r);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
Some text here
<p>More text here</p>
<aside>this is an <span>aside</span></aside>
</div>
Or you create another element then you remove the aside node:
var e = $('.box').html();
var newE = $('<div>'+e+'</div>');
newE.find('aside').remove();
console.log(newE.html());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="box">
Some text here
<p>More text here</p>
<aside>this is an <span>aside</span></aside>
</div>
Using regex to parse HTML is a BIG no-no :) ... and there is a proper usage for the asked method/selector, which I posted
– LGSon
Jun 30 at 10:15
@LGSon I added another one too ;) by the way your solution will not gather all the content within on Variable ... I think he's looking for a way to extract all the content minus the aside content ... in your case you can get also content inside the aside. So better use
> I guess– Temani Afif
Jun 30 at 10:17
>
I actually rewrote the answer, and thanks for the note about children inside
aside, they can be taken out with multiple arguments using .not()– LGSon
Jun 30 at 10:41
aside
.not()
I were wrong about the child selector...how
console.log printed it out it looked like all children were gone, but they weren't– LGSon
Jun 30 at 10:56
console.log
Plus 1 from me...as in this new question it became more clear what the OP were looking for: stackoverflow.com/questions/51132541/…
– LGSon
2 days ago
Try this.
$("div.content_article-body *:not(aside)");
I have edited my answer
– Joven28
Jun 30 at 9:59
I'm sorry; I misunderstood the question.
my prev answer was in response of this question: "JQuery selector to ignore an element?".
please test this:
$('div.content__article-body').html().replace(/<aside ?.+?>[.Ss]+?</aside>/ig, "");
Okay. I misunderstood the question:
$('div.content__article-body').html().replace(/<aside.+?>[.Ss]+?</aside>/ig, "")– Hassan Sadeghi
Jun 30 at 10:22
$('div.content__article-body').html().replace(/<aside.+?>[.Ss]+?</aside>/ig, "")
You should certainly not use the comments space for explaining or updating your answer! Edit & update your post instead...
– desertnaut
Jun 30 at 10:35
I am seeing
Unexpected escaped character '<' in regular expression, when using result = {"entry": $('div.content__article-body').html().replace(/<aside ?.+?>[.Ss]+?</aside>/ig, ""),};– Robert Andrews
2 days ago
Unexpected escaped character '<' in regular expression
result = {"entry": $('div.content__article-body').html().replace(/<aside ?.+?>[.Ss]+?</aside>/ig, ""),};
i test your sample html;all things is okay. please copy it (as html) in a div and test with browser console (F12). also, you can change
.replace(/<aside ?.+?> to .replace(/<aside ?.+?>. the `` is not important in this case. when (and where) you see this error?? i am sure that this way is correct. correct and fast. i know other ways but it is the best. i copy my code from your comment and test it again in console. all things is good.– Hassan Sadeghi
2 days ago
.replace(/<aside ?.+?>
.replace(/<aside ?.+?>
please test this fiddle
– Hassan Sadeghi
2 days ago
By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.
Provide your HTML too, so we know how to suggest a proper answer.
– LGSon
Jun 30 at 9:50