<div>
<p>Hello World!</p>
foo
</div>
I want to get only the text of the text nodes inside the div, and I can't use $('div').text() because that gives me the text of the p also.
Actually I would like to get the text of every such text node, and I hope there's something as simple as $('textNode').toArray().map((node) => $(node).text()).
Related
I have simple text editor, where user can use bold/italic etc format for input. This is simply generating text in div container of id="sampleeditor", so if user want bold it`s just adding html tag , italic so the generated dom code for BOLD ENTER ITALIC will looks like:
<div class="editor" id="sampleeditor" contenteditable="true">
<b>BOLD</b>
<div><b>
<i>ITALIC</i>
</b>
</div>
</div>
The thing is that i want to fetch whole user input data which are stored in the main div and save it to json file, but when i try to get that div value:
var x = document.getElementById("sampleeditor").value;
console.log(x);
It`s just loging - undefined, so how to target whatever is inside that div?
Divs do not have value properties, you have to use inner html
var x = document.getElementById("sampleeditor").innerHTML;
console.log(x);
this is my solution
var x = document.getElementById("sampleeditor").innerText;
console.log(x);
let x = document.querySelector(".editor");
console.log(x.textContent);
<div class="editor" id="sampleeditor" contenteditable="true">
<b>BOLD</b>
<div>
<b>
<i>ITALIC</i>
</b>
</div>
</div>
I want to count the total element and text inside the p tag
<p class="parent">
<span class="child">Span Text</span>
Text Text Text
</p>
it is possible?
$(p).children(').length
I'm using this code and this giving me 1 only but I want count 2.
You are looking for child nodes, and not children (read more about the difference here).
However, note that the actual number of child nodes in your HTML code would be 3, since there's a text node that holds the spaces before the span.
In this example, you can see the count of child nodes with or without the space before the span.
const parent1ChildNodes = document.querySelector('.parent1').childNodes.length
const parent2ChildNodes = document.querySelector('.parent2').childNodes.length
console.log(parent1ChildNodes)
console.log(parent2ChildNodes)
<p class="parent1">
<span class="child">Span Text</span>
Text Text Text
</p>
<p class="parent2"><span class="child">Span Text</span>
Text Text Text
</p>
children method only returns valid objects. "Text Text Text" is not an html object. Therefore it doesn't count. If you place it in another span, the length of the children becomes 2.
<p class="parent">
<span class="child">Span Text</span>
<span>Text Text Text</span>
</p>
You need to use contents instead of children to get text nodes counted. Note that contents will also count comment nodes.
$(p).contents().length
I am having trouble with some code for a chrome extension. The code is supposed to replace a word with another one. It does this, however, I would only like it to replace a word if it is within certain tags such as <p></p> or header tags. At the moment it replaces all the words in the HTML file within the <body></body>. This sometimes interferes with the HTML code and can break certain features of a website. Here's what I have currently.
document.body.innerHTML = document.body.innerHTML.replace(newRegExp("old", "g"), "new");
Thank you for the help!
So just loop over all the elements that you care about and do the replacement on those elements only.
// Get all the elements that you care about into an array
let elements = Array.prototype.slice.call(document.querySelectorAll("p, header"));
// Loop over the items in the array
elements.forEach(function(el){
// Do the replace on the element
el.textContent = el.textContent.replace(/text/g, "letters");
});
<header>This is some text in a header</header>
<h1>This is some text in an h1</h1>
<div>This is some text in a div</div>
<p>This is some text in a p</p>
<div>This is some text in a div</div>
<div>This is some text in a div
<p>This text is inside of a p with lots of text</p>
</div>
I have to replace some characters in all a div, but when I run the code, the function replaces me also the html tags characters
my code is:
$("#main").children().each(function() {
$(this).html($(this).html().replace(/s/g, "K"));
})
<div id="main">
<p>Some contents that will be replaced... <span>this will not be in a span tag :(</span></p>
</div>
result:
<div id="main">
<p>Kome contentK that will be replaced... <Kpan>this will not be in a Kpan tag :(</Kpan></p>
</div>
If your goal is to preserve all the markup within the div but replace text within all those tags, that's difficult. You need to find just the text nodes and no other nodes and do the replacement within each of the text nodes individually.
This question may help: How do I select text nodes with jQuery?
I have been programming with JavaScript for a while now but today I just knew that element.childNodes returns an array of nodes including the text!!!
I probably have never run with trouble because I used to create the element and append text in paragraphs; but now that I think about it, things could get really messy with text as nodes!
my question is: how can I get only the child nodes that are tags not text nodes.
For example:
<div id="e">
I don't want to include this text right here.
<p>I want to get this paragraph child</p>
I also want to <em>exclude</em> this text...
<img src="image.jpg" alt=" " />
Google
Exclude this text too..
</div>
Therefore, I want to get the p, img, a and maybe em objects only..
Here is a simple example of using .children to target only the elements. childNodes returns textNodes by default and at times that is very useful, but not appropriate for your example usage.
[].forEach.call(document.querySelector('#e').children,function(el){ el.style.color = 'red'; });
<div id="e">
I don't want to include this text right here.
<p>I want to get this paragraph child</p>
I also want to <em>exclude</em> this text...
<img src="image.jpg" alt=" " />
Google
Exclude this text too..
</div>