<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>
Related
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>
I'm newbie to Javascript, I tried the below code, it works fine for <div> element but not for <P> and <h1> elements
<script type="text/javascript">
function PrintText(){
document.getElementById('heading').innerText = 'Hello World';
}
</script>
<body>
<div id="heading"></div> // Works
<h1 id="heading"></h1> // Not Working
<P id="heading"></P> // Not Working
<button type="button" onclick="PrintText()">Submit</button>
</body>
When I use document.getElementById('heading').innerHTML= 'Hello World'; for <P> and <h1> elements the above script works(Using innerHTML instead of innerText)
Why the innerText property is not working for <p> and <h1> elements?
First suggestion is don't ever put same IDs on multiple elements in same page.
Why?
Because when you do document.getElementById() browser lookup stops when it finds first element of that ID.
Second suggestion is:
Change
innerText
To.
textContent
innerText won't work cross browser. Better to use standard way to put text with textContent.
Problematic here is your are using IDs. An ID is something unique. An ID can't be reused. If you want to assign multiple elements at once give them the same class and call them by class in your Javascript code. This should solve your problem as Javascript does not expect multiple elements to have the same ID and so it is only editing the first element.
I have variable "htmlElement" which has the format like <p class="Day">Test Message</p>
What I am going to do is to output the content of htmlElement as a string to the div which has a class panel-body.
What I did is $(".panel-body").append(htmlElement);
But in the div.panel-body, user can only see Test Message, the other part has been treated as html tag.
The question is , how could I let the div.panel-body show "<p class=Day>Test Message</p>"
Thanks.
How about
$(".panel-body").append(document.createTextNode(htmlElement));
http://jsfiddle.net/9z3zE/
Well, I don't know what you have stored in variables already, but if you have <p class=Day>Test Message</p> stored in a string variable, you can do this:
$(".panel-body").text(variable);
(As Musa said, this replaces the content.)
To add, do:
$(".panel-body").append("<p class=Day>Test Message</p>");
or
$(".panel-body").prepend("<p class=Day>Test Message</p>");
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/
I am dynamically finding the string of open tag within a page and want to use JQuery to get the text of the element that the open tag corresponds to.
For example, suppose this is my page:
<h1 class="articleHeadline">
<NYT_HEADLINE version="1.0" type=" ">
The Arab Awakening and Israel
</NYT_HEADLINE>
</h1>
<author id="monkey" class="mainauthorstyle">
<h6 class="byline">
By
<a rel="author" href="http://topics.nytimes.com/top/opinion/editorialsandoped
/oped/columnists/thomaslfriedma/index.html?inline=nyt-per" title="More Articles
by Thomas L.Friedman" class="meta-per">
THOMAS L. FRIEDMAN
</a>
</h6>
</author>
I find the '<author id="monkey" class= "mainauthorstyle">' open tag string, and want to get $("author" id["monkey"] class["mainauthorstyle"]).text() --> By THOMAS L. FRIEDMAN. Is there a simple way to turn the open tag markup into a selector? Should I just parse it with regex?
Edit: I don't know beforehand what element I want. My code looks through the page and comes up with '<author id="monkey" class= "mainauthorstyle">' as the beginning of the element. I don't know the literal beforehand. I run this code on arbitrary webpages.
author#monkey.mainauthorstyle
Here's how you do it: http://jsfiddle.net/peduarte/MgbCX/
I'm having a bit of trouble understanding your question. If you just want the text, use the following:
$("author#monkey.mainauthorstyle").text();
If you want to select the element only if "THOMAS L. FRIEDMAN" is the author, then:
$("author#monkey.mainauthorstyle:contains('THOMAS L. FRIEDMAN')")
// See http://api.jquery.com/contains-selector/ for more info on the :contains() selector
UPDATED AFTER YOUR EDIT:
If you are able to determine that you want to select the "text" of the author element with id of "monkey" and class of "mainauthorstyle", you simply need to build a jQuery selector out of those bits of information. From there you can use the text() or html() methods on the resulting jQuery object to get the contents of that element.
As my example above showed:
$("author#monkey.mainauthorstyle").text();
or
$("author#monkey.mainauthorstyle").html();
Note that the selector used is probably overkill as you should be able to simply select the element by its id.
$("#monkey").text();