Jquery remove everything except for bolded - javascript

I have html like this:
<div id="divTestArea1">
<b>Bold text</b>
<i>Italic text</i>
<div id="divTestArea2">
<b>Bold text 2</b>
<i>Italic text 2</i>
<div>
<b>Bold text 3</b>
</div>
</div>
and I would like to remove all elements that aren't bold. I've tried with this code:
$('*:not(b)').remove();
and a couple other variations but they all either error out or remove everything. btw, are jquery selectors and jsoup selectors 100% compatible? I'd like to use the answer to this in jsoup as well.

Your current code removes the document <body> as well as all <div>s which contain the <b> tags. If you only want to save the bold text then Shih-En Chou's solution works well. If you want to save the <div> structure that the <b> tags are in as well you could do this:
$("body *:not(div, b)")​​​​.remove();​
DEMO

My solution:
I clone <b> and save it into memory.
->Remove all
-> insert <b> into <body>
here is my code:
http://jsfiddle.net/sechou/43ENq/
$(function(){
var tmpB = $("b").clone();
$('body').remove();
$("body").append(tmpB);
});​

Move all elements in #divTestArea2 as it is a div and will be removed as well to #divTestArea1, then filter out anything that is'nt a <b> and remove it :
$("#divTestArea1").append($("*", "#divTestArea2")).find('*').filter(function() {
return this.tagName !== 'B';
}).remove();
FIDDLE
The above keeps the #divTestArea1 element intact, to remove everything but the <b> elements, something like :
$('body')​.append($('b'))​.find('*')​.not('b')​.remove();​
FIDDLE

I prefer .detach().
var $body = $("body");
var $b = $("b", $body).detach();
$(":not(b)", $body).remove();​​​​​​​​​​​
$body.append($b);
This way you don't need to either move or clone anything to overcome the problem of the deletion of the objects wrapping your <b/> elements.
(demo)

Try this:
// Find all the <b> tags and unwrap them so they all become siblings and finally
// remove non <b> siblings
$('body').find('b').unwrap().siblings('*:not(b)').remove();
Demo: http://jsfiddle.net/3f2Hu/

Related

How to get parent element html but not children tags?

I am not sure I gave correct title to my question but I want to ask to do something like:
I want to get HTML content of parent element. By doing this, this will also include HTML tags of children element but I don't want that. I just want children HTML.
For Example:
<div class="test"> This is content of div
<p class="boring_class" style="borinhdlfj"> This is paragraph<br> content.<span><i>As you<br> can</i></span> see I have added <br> tag</p>
</div>
from above example If I use .text() jquery method to get div content I will get text only but not <br> tag. But if I use .html() jquery, this will also include <p class="boring_class" style='dflkdjf'>....</p> but I don't want that.
I just want html of children element which is:This is paragraph<br> content.As you can see I have added <br> tag.
How can I achieve that?
Final output should look like:
This is content of div This is paragraph <br> content.As you can see I have added <br> tag
As one possible interpretation of the question:
Get html of all children, including text [not in a children nodes]
You can use .contents() to include the text nodes of the parent (the parts that aren't in tags, eg "This is content of div") then loop through those to get either text or html depending on where it is, giving:
var output = $(".test").contents().map((i, e) => {
if (e.nodeType == 3)
return $(e).text();
return $(e).html()
})
.toArray()
.join(" ");
console.log(output)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="test"> This is content of div
<p class="boring_class" style="borinhdlfj"> This is paragraph<br> content.As you can see I have added <br> tag</p>
</div>
Note this includes all whitespace (newlines) which were not included in the question's example output, so you may need to remove these for an exact match.
You can accomplish this in regular javascript by using innerHTML as shown below.
For more info, see: https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML
const list = document.getElementsByClassName("test")[0];
const inner = list.innerHTML;
const noP = inner.replace(/<p[^>]*>/g, "").replace(/<\/p[^>]*>/g, "").replace(/\n/g,'');
console.log(noP);
<div class="test"> This is content of div
<p class="boring_class" style="borinhdlfj"> This is paragraph<br> content.As you can see I have added <br> tag</p>
</div>

Javascript debugging: Printing out the element retrieved from a jQuery selector

I want to get an HTML element with a jQuery selector and print out all its contents (either in an alert or console debug). Something like this...
<div class="mydiv">Hello is it me you are looking for?</div>
<script>
alert("But I still haven't found what I am looking for " + $("#mydiv").html());
</script>
I also tried printElement as suggested in this post, but that doesn't seem to work either.
Here is a simple fiddle.
The # is the id selector. You have a class (<div class="mydiv">) so you need to use the class selector .:
alert("But I still haven't found what I am looking for " + $(".mydiv").html());
Wrap the content for which you want to print HTML element.
<div id="myHtml">
<div class="mydiv">Hello is it me you are looking for?</div>
</div>
<script>
alert($("#myHtml").html())
</script>

Get the Text inside the element

<p class="MsoNormal" style="margin-bottom:0cm;margin-bottom:.0001pt;text-align:
justify;line-height:normal">
First Text
<span lang="EN-US" style="font-size:12.0pt;
font-family:"Times New Roman","serif"">
Second Text</span>
</p>
This is my code, how to get the content inside the paragraph tag. [The tag may change to div or ul]. I need all the content inside the paragraph tag by javascript.
The output should be :
First Text Second Text
Sorry I am new to javascript, searched but cant find answer for this relevant problem. Thanks
To get the value of a tag, you can get the element with a selector and use innerHTML to get the value. like this:
<p>hi there</p>
console.log(document.getElementsByTagName('p')[0].innerHTML);
n.b. in the code above it's selecting by tag name, so it returns an array of matching elements
So in your example, using .innerHTML with give you the P tags content, including any html tags etc.
if you want just the content, you can use .textContent
console.log(document.getElementsByTagName('p')[0].textContent);
This wont give you the inner html tags
n.b. there is also the innerText method, However this isnt supported accross browsers.
You can change according to the tag you need, but basically this will do the trick:
document.getElementsByTagName('p')[0].innerText
Fiddle
InnerText should be a good solution.
console.log(document.getElementsByTagName('p')[0].innerText);
<p class="MsoNormal" style="margin-bottom:0cm;margin-bottom:.0001pt;text-align:
justify;line-height:normal">
First Text
<span lang="EN-US" style="font-size:12.0pt;
font-family:"Times New Roman","serif"">
Second Text</span>
</p>

How to append just before the end of the BODY tag using JQuery [duplicate]

I have this HTML:
<div class="region-list" id="region_North_America">
<strong>North America</strong>
</div>
and want to add more divs after the strong element to result:
<div class="region-list" id="region_North_America">
<strong>North America</strong>
<div> ... </div>
<div> ... </div>
<div> ... </div>
</div>
I am trying this:
var row_str = '<div>content here</div>';
$('#region_North_America div:last').html(row_str);
However, there is no change to the html. This is probably so since there is no div within the element selected.
I know that the js is making it to this code because I can print the content of row_str to the console.
So, how can I get to the end of that container element to add the new items?
Thx.
Try:
$("#region_North_America").append(row_str);
using append().
Or:
$("<div>content here</div>").appendTo("#region_North_America");
To create the element on the fly, and place it in the document.
Using the appendTo method.
Your code will just place html in the last div within #region_North_America. Use the append function.
$("div.region-list").append(row_str);

Selectively getting text from <div>

<div class="myDiv">
<p>I need get<strong>this</strong>
<a title="And this" href="#">but not this</a>
</p>
<p>And also<strong>This</strong>
<a title="And this" href="#">but not this</a>
</p>
</div>
How do I grab everything in p tag except for the text in nested a tag. And also I need to get values for "title" attirbute for tag a?
Using http://api.jquery.com/replaceWith/
Creates a clone
Replaces the a tags with their title attributes
Calls text() on the cloned node
http://jsfiddle.net/mendesjuan/cBejv/2/
var clone = $('.myDiv p').clone();
clone.find('a').replaceWith(function() {
return this.getAttribute('title');
})
console.log(clone.text());
Outputs
I need get this
And this And also This
And this
How about this:
$('.myDiv a').text('');
$('.myDiv p').each(function() {
console.log($(this).text()+$('a',this).attr('title'));
});
jsFiddle example.
Something like this would work. There may be a much better way to do this, but this was the first thing to come to mind.
var $clone = $('.myDiv').clone();
$clone.find('a').remove();
$('#output').append($clone.text());​
Make sure you add an element with id="output" to see the results.

Categories