Detect inline elements with cheerio?
Is it possible to detect inline elements with cheerio? For example:
<div>
Hello
<strong>there</strong>
John!
</div>
This is an example of an inline element I would like to detect, because to a reader, the strong tag is very clearly a continuation of the rest of the phrase. However, compared to something like this:
<div>
Jobs
<span>Cleaner</span>
<span>Artist</span>
</div>
These aren't exactly inline, because to a reader, they are clearly separated.
I guess what I'm asking is, is it possible to use cheerio to detect if an element is sandwiched between the text of its parent?
javascript html css node.js cheerio
asked Jan 3 at 3:58
Luke TanLuke Tan
4701415
add a comment |
Is it possible to detect inline elements with cheerio? For example:
<div>
Hello
<strong>there</strong>
John!
</div>
This is an example of an inline element I would like to detect, because to a reader, the strong tag is very clearly a continuation of the rest of the phrase. However, compared to something like this:
<div>
Jobs
<span>Cleaner</span>
<span>Artist</span>
</div>
These aren't exactly inline, because to a reader, they are clearly separated.
I guess what I'm asking is, is it possible to use cheerio to detect if an element is sandwiched between the text of its parent?
javascript html css node.js cheerio
asked Jan 3 at 3:58
Luke TanLuke Tan
4701415
add a comment |
Is it possible to detect inline elements with cheerio? For example:
<div>
Hello
<strong>there</strong>
John!
</div>
This is an example of an inline element I would like to detect, because to a reader, the strong tag is very clearly a continuation of the rest of the phrase. However, compared to something like this:
<div>
Jobs
<span>Cleaner</span>
<span>Artist</span>
</div>
These aren't exactly inline, because to a reader, they are clearly separated.
I guess what I'm asking is, is it possible to use cheerio to detect if an element is sandwiched between the text of its parent?
javascript html css node.js cheerio
asked Jan 3 at 3:58
Luke TanLuke Tan
4701415
Is it possible to detect inline elements with cheerio? For example:
<div>
Hello
<strong>there</strong>
John!
</div>
This is an example of an inline element I would like to detect, because to a reader, the strong tag is very clearly a continuation of the rest of the phrase. However, compared to something like this:
<div>
Jobs
<span>Cleaner</span>
<span>Artist</span>
</div>
These aren't exactly inline, because to a reader, they are clearly separated.
I guess what I'm asking is, is it possible to use cheerio to detect if an element is sandwiched between the text of its parent?
javascript html css node.js cheerio
javascript html css node.js cheerio
asked Jan 3 at 3:58
Luke TanLuke Tan
4701415
asked Jan 3 at 3:58
Luke TanLuke Tan
4701415
asked Jan 3 at 3:58
Luke TanLuke Tan
4701415
asked Jan 3 at 3:58
Luke TanLuke Tan
4701415
asked Jan 3 at 3:58
Luke TanLuke Tan
4701415
4701415
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
Note: The term inline elements might not be the best to describe what you are trying to achieve.
The basic steps I would take are:
- use childNodes to get a nodelist of child text and
html elements. - Then use nodeType or similar to figure out if the node is an
element or text. - Then check if the text elements have more than just white space characters in their respective
textContentor data.
Working with js, one way this could be accomplished is like so:
function markSandwichedEls(parent) {
var children = parent.childNodes;
for (let i = 0; i < children.length; i++) {
if (
children[i].nodeType === 1 &&
children[i - 1].nodeType === 3 &&
children[i - 1].textContent.replace(/s/g, "").length &&
children[i + 1].nodeType === 3 &&
children[i + 1].textContent.replace(/s/g, "").length
) {
children[i].style.backgroundColor = "red";
}
}
}
document.querySelectorAll("div").forEach(div => {
markSandwichedEls(div);
});<div>
Hello
<strong>there</strong> John!
</div>
<div>
Jobs
<span>Cleaner</span>
<span>Artist</span>
</div>So by applying a very similar approach, this could be achieved in cheerio like so:
const cheerio = require('cheerio')
const $ = cheerio.load(`
<div>
Hello
<strong>there</strong> John!
</div>
<div>
Jobs
<span>Cleaner</span>
<span>Artist</span>
</div>
`)
const divs = $('div')
divs.toArray().forEach(div => {
div.childNodes.forEach(child => {
if (
child.type === 'tag' &&
child.prev.type === 'text' &&
child.prev.data.trim() !== '' &&
child.next.type === 'text' &&
child.next.data.trim() !== ''
) {
console.log(child)
}
})
})
stackblitz
answered Jan 3 at 8:30
ksavksav
5,38721432
1
thanks a bunch! exactly what I was looking for :)
– Luke Tan
Jan 5 at 7:05
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54016163%2fdetect-inline-elements-with-cheerio%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
Note: The term inline elements might not be the best to describe what you are trying to achieve.
The basic steps I would take are:
- use childNodes to get a nodelist of child text and
html elements. - Then use nodeType or similar to figure out if the node is an
element or text. - Then check if the text elements have more than just white space characters in their respective
textContentor data.
Working with js, one way this could be accomplished is like so:
function markSandwichedEls(parent) {
var children = parent.childNodes;
for (let i = 0; i < children.length; i++) {
if (
children[i].nodeType === 1 &&
children[i - 1].nodeType === 3 &&
children[i - 1].textContent.replace(/s/g, "").length &&
children[i + 1].nodeType === 3 &&
children[i + 1].textContent.replace(/s/g, "").length
) {
children[i].style.backgroundColor = "red";
}
}
}
document.querySelectorAll("div").forEach(div => {
markSandwichedEls(div);
});<div>
Hello
<strong>there</strong> John!
</div>
<div>
Jobs
<span>Cleaner</span>
<span>Artist</span>
</div>So by applying a very similar approach, this could be achieved in cheerio like so:
const cheerio = require('cheerio')
const $ = cheerio.load(`
<div>
Hello
<strong>there</strong> John!
</div>
<div>
Jobs
<span>Cleaner</span>
<span>Artist</span>
</div>
`)
const divs = $('div')
divs.toArray().forEach(div => {
div.childNodes.forEach(child => {
if (
child.type === 'tag' &&
child.prev.type === 'text' &&
child.prev.data.trim() !== '' &&
child.next.type === 'text' &&
child.next.data.trim() !== ''
) {
console.log(child)
}
})
})
stackblitz
answered Jan 3 at 8:30
ksavksav
5,38721432
1
thanks a bunch! exactly what I was looking for :)
– Luke Tan
Jan 5 at 7:05
add a comment |
Note: The term inline elements might not be the best to describe what you are trying to achieve.
The basic steps I would take are:
- use childNodes to get a nodelist of child text and
html elements. - Then use nodeType or similar to figure out if the node is an
element or text. - Then check if the text elements have more than just white space characters in their respective
textContentor data.
Working with js, one way this could be accomplished is like so:
function markSandwichedEls(parent) {
var children = parent.childNodes;
for (let i = 0; i < children.length; i++) {
if (
children[i].nodeType === 1 &&
children[i - 1].nodeType === 3 &&
children[i - 1].textContent.replace(/s/g, "").length &&
children[i + 1].nodeType === 3 &&
children[i + 1].textContent.replace(/s/g, "").length
) {
children[i].style.backgroundColor = "red";
}
}
}
document.querySelectorAll("div").forEach(div => {
markSandwichedEls(div);
});<div>
Hello
<strong>there</strong> John!
</div>
<div>
Jobs
<span>Cleaner</span>
<span>Artist</span>
</div>So by applying a very similar approach, this could be achieved in cheerio like so:
const cheerio = require('cheerio')
const $ = cheerio.load(`
<div>
Hello
<strong>there</strong> John!
</div>
<div>
Jobs
<span>Cleaner</span>
<span>Artist</span>
</div>
`)
const divs = $('div')
divs.toArray().forEach(div => {
div.childNodes.forEach(child => {
if (
child.type === 'tag' &&
child.prev.type === 'text' &&
child.prev.data.trim() !== '' &&
child.next.type === 'text' &&
child.next.data.trim() !== ''
) {
console.log(child)
}
})
})
stackblitz
answered Jan 3 at 8:30
ksavksav
5,38721432
1
thanks a bunch! exactly what I was looking for :)
– Luke Tan
Jan 5 at 7:05
add a comment |
Note: The term inline elements might not be the best to describe what you are trying to achieve.
The basic steps I would take are:
- use childNodes to get a nodelist of child text and
html elements. - Then use nodeType or similar to figure out if the node is an
element or text. - Then check if the text elements have more than just white space characters in their respective
textContentor data.
Working with js, one way this could be accomplished is like so:
function markSandwichedEls(parent) {
var children = parent.childNodes;
for (let i = 0; i < children.length; i++) {
if (
children[i].nodeType === 1 &&
children[i - 1].nodeType === 3 &&
children[i - 1].textContent.replace(/s/g, "").length &&
children[i + 1].nodeType === 3 &&
children[i + 1].textContent.replace(/s/g, "").length
) {
children[i].style.backgroundColor = "red";
}
}
}
document.querySelectorAll("div").forEach(div => {
markSandwichedEls(div);
});<div>
Hello
<strong>there</strong> John!
</div>
<div>
Jobs
<span>Cleaner</span>
<span>Artist</span>
</div>So by applying a very similar approach, this could be achieved in cheerio like so:
const cheerio = require('cheerio')
const $ = cheerio.load(`
<div>
Hello
<strong>there</strong> John!
</div>
<div>
Jobs
<span>Cleaner</span>
<span>Artist</span>
</div>
`)
const divs = $('div')
divs.toArray().forEach(div => {
div.childNodes.forEach(child => {
if (
child.type === 'tag' &&
child.prev.type === 'text' &&
child.prev.data.trim() !== '' &&
child.next.type === 'text' &&
child.next.data.trim() !== ''
) {
console.log(child)
}
})
})
stackblitz
answered Jan 3 at 8:30
ksavksav
5,38721432
Note: The term inline elements might not be the best to describe what you are trying to achieve.
The basic steps I would take are:
- use childNodes to get a nodelist of child text and
html elements. - Then use nodeType or similar to figure out if the node is an
element or text. - Then check if the text elements have more than just white space characters in their respective
textContentor data.
Working with js, one way this could be accomplished is like so:
function markSandwichedEls(parent) {
var children = parent.childNodes;
for (let i = 0; i < children.length; i++) {
if (
children[i].nodeType === 1 &&
children[i - 1].nodeType === 3 &&
children[i - 1].textContent.replace(/s/g, "").length &&
children[i + 1].nodeType === 3 &&
children[i + 1].textContent.replace(/s/g, "").length
) {
children[i].style.backgroundColor = "red";
}
}
}
document.querySelectorAll("div").forEach(div => {
markSandwichedEls(div);
});<div>
Hello
<strong>there</strong> John!
</div>
<div>
Jobs
<span>Cleaner</span>
<span>Artist</span>
</div>So by applying a very similar approach, this could be achieved in cheerio like so:
const cheerio = require('cheerio')
const $ = cheerio.load(`
<div>
Hello
<strong>there</strong> John!
</div>
<div>
Jobs
<span>Cleaner</span>
<span>Artist</span>
</div>
`)
const divs = $('div')
divs.toArray().forEach(div => {
div.childNodes.forEach(child => {
if (
child.type === 'tag' &&
child.prev.type === 'text' &&
child.prev.data.trim() !== '' &&
child.next.type === 'text' &&
child.next.data.trim() !== ''
) {
console.log(child)
}
})
})
stackblitz
function markSandwichedEls(parent) {
var children = parent.childNodes;
for (let i = 0; i < children.length; i++) {
if (
children[i].nodeType === 1 &&
children[i - 1].nodeType === 3 &&
children[i - 1].textContent.replace(/s/g, "").length &&
children[i + 1].nodeType === 3 &&
children[i + 1].textContent.replace(/s/g, "").length
) {
children[i].style.backgroundColor = "red";
}
}
}
document.querySelectorAll("div").forEach(div => {
markSandwichedEls(div);
});<div>
Hello
<strong>there</strong> John!
</div>
<div>
Jobs
<span>Cleaner</span>
<span>Artist</span>
</div>function markSandwichedEls(parent) {
var children = parent.childNodes;
for (let i = 0; i < children.length; i++) {
if (
children[i].nodeType === 1 &&
children[i - 1].nodeType === 3 &&
children[i - 1].textContent.replace(/s/g, "").length &&
children[i + 1].nodeType === 3 &&
children[i + 1].textContent.replace(/s/g, "").length
) {
children[i].style.backgroundColor = "red";
}
}
}
document.querySelectorAll("div").forEach(div => {
markSandwichedEls(div);
});<div>
Hello
<strong>there</strong> John!
</div>
<div>
Jobs
<span>Cleaner</span>
<span>Artist</span>
</div>answered Jan 3 at 8:30
ksavksav
5,38721432
edited Jan 4 at 17:46
answered Jan 3 at 8:30
ksavksav
5,38721432
answered Jan 3 at 8:30
ksavksav
5,38721432
answered Jan 3 at 8:30
ksavksav
5,38721432
5,38721432
1
thanks a bunch! exactly what I was looking for :)
– Luke Tan
Jan 5 at 7:05
add a comment |
1
thanks a bunch! exactly what I was looking for :)
– Luke Tan
Jan 5 at 7:05
1
1
thanks a bunch! exactly what I was looking for :)
– Luke Tan
Jan 5 at 7:05
thanks a bunch! exactly what I was looking for :)
– Luke Tan
Jan 5 at 7:05
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f54016163%2fdetect-inline-elements-with-cheerio%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
