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
Related
I have a question that might seems easy but I can't seem to find a solution.
<div class="text">
<p class="paragraph">
<span>The main text is this one </span>
<span class="bold">with bold text near</span>
</p>
<p class="bold-dynamic" style="" data-message-code="dynamic-message">Add me near the other paragraph without losing the dynamic content</p>
</div>
So basically, I have to unite all these paragraphs + spans together on one line without losing the dynamic content I am getting in the 3rd paragraph.
The final message should look like: "The main text is this one with bold text near, add me near the other paragraph without losing the dynamic content."
How can I achive this? I can't use innerText/innerHTML, appendchild and I can't harcode the paragraph with the dynamic content. Many thanks.
Without innerText, innerHTML and DOM manipulation functions there is not really any way to change the document?
I am assuming that you can use them, but that you've not managed to make it work?
Please add more detail to your question if this is not the case.
Without knowing what your desired markup is, I've just removed all the p.paragraph and replaced them with a textNode with their innerText. Also setting the display: inline to p.bold-dynamic to remove the new line(s)
I've updated the code to now just insert lots of display: inline
// find all p.paragrah inside div.text
document.querySelectorAll("div.text > p.paragraph").forEach((element) => {
// insert a textNode with the innerText of the p.paragraph
//element.parentNode.insertBefore(document.createTextNode(element.innerText), element)
// set p.bold-dynamic display: inline
//element.parentNode.querySelector("p.bold-dynamic").setAttribute("style", "display: inline;")
// remove the p.paragraph
//element.parentNode.removeChild(element)
element.setAttribute("style", "display: inline;")
element.querySelectorAll("*").forEach((tag) => {
tag.setAttribute("style", "display: inline;")
})
element.parentNode.querySelector("p.bold-dynamic").setAttribute("style", "display: inline;")
})
<div class="text">
<p class="paragraph">
<span>The main text is this one </span>
<span class="bold">with bold text near</span>
</p>
<p class="bold-dynamic" style="" data-message-code="dynamic-message">Add me near the other paragraph without losing the dynamic content</p>
</div>
<div class="text">
<p class="paragraph">
<span>The main text is this one </span>
<span class="bold">with bold text near</span>
</p>
<p class="bold-dynamic" style="" data-message-code="dynamic-message">Add me near the other paragraph without losing the dynamic content</p>
</div>
<div class="text">
<p class="paragraph">
<span>The main text is this one </span>
<span class="bold">with bold text near</span>
</p>
<p class="bold-dynamic" style="" data-message-code="dynamic-message">Add me near the other paragraph without losing the dynamic content</p>
</div>
<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()).
I have this element structure.
<p>
<span class="ts-aria-only">
Departure
</span>
RUH
<span class="ts-aria-only"> Riyadh</span>
</p>
I'm trying to get the text RUH, but using innerText will return the whole text including the value inside <span>.
Some answers posted here on SO uses ajax, which is not applicable for my use case.
It's a text node, so it can't be selected with a query string. You'll have to start from its parent element and access the appropriate childNodes index:
console.log(
document.querySelector('p').childNodes[2].textContent.trim()
);
<p>
<span class="ts-aria-only">
Departure
</span>
RUH
<span class="ts-aria-only"> Riyadh</span>
</p>
this should work
Array.from(document.querySelector('p').childNodes).reduce((a,b) => a += b.nodeType==3 ? b.textContent.trim() : '' ,'')
basically you need to check each childNode if it is textNode (nodeType==3)
then you could do with it whatever you want
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 a small problem that i cannot solve.I have this : <p>Text<span></span></p> and i want to change only the text of the <p>.Which means, when i click on an change-Button, the text based on an input field should replace the text.
What i have tried is something like this : $("p").text("newText") but this will also remove the <span>.
So how can i only change the text and not the inner html...
With your HTML above you can do
$('p').contents().first()[0].textContent='newText';
The idea is to take advantage of the fact that contents() includes text-nodes. Then, access by index [0] to get the native javascript DOM element and set the textContent
$('p').contents().first()[0].textContent = 'newText';
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<p>Text<span>inside span</span>
</p>
Put another span inside of the p tag and only change its contents:
<p>
<span id="theText">Text</span>
<span></span>
</p>
And then:
$('#theText').text('newText');
$('#theText').text('newText')
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p>
<span id="theText"></span>
<span>some other span</span>
</p>