I am using cheerio to extract text node from the html file.
can somebody please guide me if there is any way one can extract tooltip text using cheerio? i.e.
scenario 1:
<div class="row" style="padding-bottom: 5px;" uib-tooltip="this is tooltip text">
this is text
</div>
scenario 2:
<div class="row" style="padding-bottom: 5px;" uib-tooltip="this is inner tooltip text">
<div class="row" style="padding-bottom: 5px;" uib-tooltip="this is inner tooltip text">
this is enclosed text
</div>
</div>
the attached screenshot shows the json object which cheerio provides on parsing html
What i understood from your question is that you want innerHTML of an element which has uib-tooltip attribute.
So, you can just use $('[uib-tooltip]').html() to get the innerHTML, or any other selecter which suits your requirement.
That's an attribute, therefore:
$('.row').attr('uib-tooltip')
Related
Can I add div contents (innerText / textContent) after adding a div in the parent class using JavaScript. I know it's confusing and also I am not sure whether my demand is correct or not.
Can someone just help how to achieve below HTML results using JS.
<div class="container">
<div class="mesg left">
<div class="username">
You
</div>
The main content goes here
<span id="time">08:23am</span>
</div>
</div>
I had tried to achieve this but I my case the content comes up... Like(see the output html from what I have did from JS)
<div class="container">
<div class="description">
The main content goes here
<div class="name">
James
</div>
<span id="time">08:23am</span>
</div>
</div
You can use Node.insertBefore to place the text before the timestamp.
Given your HTML this would work:
const time = document.getElementById("time")
const content = document.createElement("p")
content.innerText = "The main content goes here"
document.getElemenstByClassName("mesg left")[0]
.insertBefore(content, time)
<div class="css-ki-menu">
<div class="css-11ur">
<div class="css-d0i-option" id="react-select-3-option-0" tabindex="-1">L3</div>
<div class="css-f5s-option" id="react-select-3-option-1" tabindex="-1">L4</div>
</div>
</div>
I have the text 'L3' is there any way to find the relative xpath using the text?
Please help me out am new to it
Thank you
To locate element with L3 text as in the example provided you can simply use //div[contains(text(),'L3')] or //div[text()='L3']
If you need this xpath to be relative to some other element - please provide more details.
I want to validate if two given html elements are the same without comparing the data in it. I just want to match the DOM structure and attributes.
For eg.
HTML element 1:
<div class="abc def">
<div id="123">
This is some text
</div>
Text1
</div>
HTML element 2:
<div class="def abc">
<div id="123">
This is some text v2
</div>
Text2
</div>
HTML element 1 has same structure as HTML element 2(dom and attributes), but the text(data) is different. I want this to return true.
Please help me understand why this is happening.
(UPDATE) TL;DR:
nested elements' text will be included when using find with not(NESTED_ELEMENT) selector but will be excluded when using find with not(NESTEDT_ELEMENT)+contents+filter(TEXT_NODE).
I want to get the text from a page but to exclude some elements.
For the simplicity, I have excluded <p> element only (and descendants) but when I use the text(), I'm also getting the text in the excluded element.
When I filter the results with contents() to include only text nodes, only then the not selector is "working" by not returning the text from the excluded elements. Please see image below with the code used:
Why isn't it working without using contents()?
Thanks.
For your convenience:
The URL that I tested on is this one.
The code that gives me the excluded element's text:
$('body').find(':not(p, p *)').text()
The code that gives me the desired text (excluded element's text not present):
$('body').find(':not(p, p *)').contents().filter(function(){return this.nodeType == 3}).text()
And here's the HTML part from the URL. As you can see, there's a <p> element there and As described, I want to get the text from this HTML but to exclude some elements (p was selected for simplicity, there will be lots more rules in production).
<div class="col-lg-12">
<header id="header" role="banner" class="jumbotron">
<h1>
<img src="/img/icon/apple-touch-icon-114-precomposed.png" class="offscreen" alt="">
<i class="icon-html5" aria-hidden="true"></i><span class="offscreen">HTML 5</span>
<span>Semantics and Accessibility: <span class="subheader">Heading Structure</span></span>
</h1>
<p class="lead" id="lead_content">The more you understand the specification, the more you'll realize there are more right
ways to implement <em>proper</em> semantic HTML markup than wrong. Thinking in terms of web accessibility can provide direction.</p>
</header>
</div>
Try using .clone() , .remove() , .text()
var filtered = $(".col-lg-12").clone();
filtered.find("p").remove();
console.log(filtered.text())
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div class="col-lg-12">
<header id="header" role="banner" class="jumbotron">
<h1>
<img src="/img/icon/apple-touch-icon-114-precomposed.png" class="offscreen" alt="">
<i class="icon-html5" aria-hidden="true"></i><span class="offscreen">HTML 5</span>
<span>Semantics and Accessibility: <span class="subheader">Heading Structure</span></span>
</h1>
<p class="lead" id="lead_content">The more you understand the specification, the more you'll realize there are more right ways to implement <em>proper</em> semantic HTML markup than wrong. Thinking in terms of web accessibility can provide direction.</p>
</header>
</div>
I've crated html template file, I put some elements inside that template are non editable.
template.html contains
<body>
<div>This is a sample template </div>
<div contenteditable="false" style="color:red">Read Only Text</div>
</body>
on inserting this template file into the textarea the second div is editable, while inspecting over that div I've seen that the attribute contenteditable="false" is not there on insert, but its there on the preview before the insert of template.
Any help gratefully received!
From this page: http://www.tinymce.com/tryit/noneditable_content.php
Its using a textarea:
<textarea name="content" style="width:100%">
<p>Text with a <span class="mceNonEditable">[non editable]</span> inline element.</p>
<p class="mceNonEditable">Noneditable text block with <span class="mceEditable">[editable]</span> items within.</p>
<p>Text with tokens that isn't [[editable]] since they match the noneditabe_regexp.</p>
</textarea>
The key here is putting a class of mceNonEditable in your element:
span class="mceNonEditable"
Then whatever non-editable content you have, wrap it in greater than and less than:
>You cannot edit me<
Then finally close the element:
/span
I think you can also change the mode (in the example they're using textareas, so I guess you can also use divs or spans) when initializing tinymce:
tinyMCE.init({
mode : "textareas",
noneditable_regexp: /\[\[[^\]]+\]\]/g
});
There's also noneditable_regexp which lets you specify a regular expression of non-editable contents.
I think this is easier than using html entities.
I haven't actually tried it but that's the way I interpret the example in the page.