How to get text from xhtml - html

<div>
<fieldset>
<legend class="lheader">Section Information:</legend>
<span id="lblSectionInfo">
Name:
<font style="font-weight:normal">rr</font>
<br>
Type:
<font style="font-weight:normal">Section Type </font>
Section List:
<font style="font-weight:normal"> Yes </font>
Status:
<font style="font-weight:normal">
Section:
<font style="font-weight:normal">Section Condition</font>
<br>
</span>
</fieldset>
</div>
I have to get the text from the above Section Information section of the screen.
I tried getText() and it returns blank row, tried getAttribute("innerText") and it returns N/A, tried getAttribute("innerHTML") and it returns N/A
Not sure how I can get the complete text or individual test e.g. Section Name
should return text Section "RR" etc. The Xpath I am using is correct.
Any help is really appreciated.
Fyi, I am using Xpath below to get the text.
//div[#id = 'TestView5']//span[#id = 'lblSectionInfo']
My Xpath is correct as I am able to highlight the complete text on this section when use it by Selenium IDE.

It's quite difficult to separate those fields because they are under the same span node. I can see two workarounds.
1. Use index of <font> node as an anchor.
Name: "//span[#id='lblSectionInfo']/font[1]"
Type: "//span[#id='lblSectionInfo']/font[2]"
Section List: "//span[#id='lblSectionInfo']/font[3]"
2. Use JavaScript to find the text nodes to get field names, and then use Selenium to find the <font> node to get their values. Finally, map them together.
function getTextNode(rootNode) {
var nodes = rootNode.childNodes;
var fieldNames = [];
var count=0;
for (var i = 0; i < nodes.length; i++) {
if ((nodes[i].nodeType == Node.TEXT_NODE)) {
if(nodes[i].textContent.trim().indexOf(':')>0) {
let text = nodes[i].textContent.trim();
fieldNames[count] = text.substring(0,text.length-1);
}
}
}
return fieldNames;
}

Related

Scraping text() value if href contains a part of specific text

I'm trying to collect the text in a if href contains venue/, so I tried to do it this way:
var venue = $('.details > span > a:contains(href="venue/")');
sheet.getRange(3,17).setValue(venue.text().trim());
But returns with no value, how should I be able to retrieve such value?
As the site changes the positions of the elements from time to time, I need to define this contains.
Expected Result:
Estadio Manuel Ferreira (Asunción)
Map Example:
<div class="details ">
11/08/2021
<span class="divider"></span>
CONMEBOL Libertadores
<span class="divider"></span>
<span>KO</span>
<span>
19:15
</span>
<br>
<span>Venue</span>
<span>
Estadio Manuel Ferreira (Asunción)</span>
</div>
Link to site:
https://int.soccerway.com/matches/2021/08/12/south-america/copa-libertadores/club-olimpia/clube-de-regatas-de-flamengo/3579565/
It seems like the issue is right on the first line, as the “venue” variable does not return what you expect.
I propose you select the anchor you are looking for by getting the last element of type a in the div you provided and assign the value of its href attribute to a variable called venue. After that, check if the venue variable is equal to venue/. If the condition returns true, get the anchor’s inner text, assign it to a variable called result and log it.
You can make it work by using the following code:
let element = $('.details a').last()
let venue = element.attr('href');
if (venue === 'venue/') {
let result = element.text()
console.log(result) // this is the value you are looking for
}
Updated:
let elements = $('.details a')
elements.each((index, value) => {
let href = $(value).attr('href')
if (href === 'venue/') {
console.log($(value).text())
}
})

how to highlight the words which are invalid in input given by a user

how to highlight only the words which are invalid in input given by a user where i can make my custom invalid check function.
e.g
hello this is very good and very nice.
suppose this is the input by the user and suppose i want to highlight "very" and "this" or any other custom word.
I have tried putting html tag inside value but html does not parses inside value attribute of input tag.
Try using variable.split() in reading the input. Store it in array using loop and check for errors and highlight
You cannot simply put html tags in input. To enable "rich text" capabilities, you'll have to use the contenteditable HTML attribute, like so...
const words = [/(very)/gi, /(nice)/gi]
const highlightInput = () => {
const richInput = document.getElementById('rich-input')
let text = richInput.innerText
words.forEach(x => {
text = text.replace(x, '<span class="highlighted">$1</span>')
})
richInput.innerHTML = text
}
document.getElementById('highlight').addEventListener('click', highlightInput)
#rich-input{
border:1px solid #000;
padding: 5px;
}
.highlighted{
color:red;
text-decoration:underline;
}
<div>
<input type="button" value="Highlight!" id="highlight" />
</div>
<label>Enter your text below:</label>
<div id="rich-input" contenteditable="true">Hello this is very good and very nice</div>

Accessing the text of a class that contains other elements using Cheerio

I only want to access h1's text (H1 title is here in this case), but it prints everything. I tried adding .remove('.small-title') before text(), but it didn't work.
<div class="modal-know>
<h1>
H1 title is here
<div class="small-title">
Click
Click 2
</div>
</h1>
</div>
Node.js code
var newsTitle = $2('.modal-know h1').text(); // prints out everything
console.log(newsTitle);
have a look at cheerio docs: text()
it says
including their descendants
That is the same behaviour that jQuery .text()
So maybe this answer could help you :jQuery: using .text() to retrieve only text not nested in child tags
Here you have the code I tested:
let newsTitle = $('.modal-know h1').contents()[0].nodeValue;
// solution 2:
// .clone() //clone the element
// .children() //select all the children
// .remove() //remove all the children
// .end() //again go back to selected element
// .text(); // prints out everything
//solution 3:
// .contents().filter(function(){
// return this.nodeType == 3;
// })[0].nodeValue;
console.log(newsTitle);
*in your code sample ther is a missing " in the div modal-know class
<div class="modal-know> -> <div class="modal-know">

Can I use different styles within one div

I'm using a script to do a mouseover effect with images and also highlighting text in a different color using the getElementById phrase. I understand that an ID can only be used once, and if it needs to be used more than once I should use class. But there is no getElementByClass function. I have 2 areas of type that I want to highlight, one is centered, the other is left justified. Is there a way to use the same id for both styles?
<div id="georgia">
<style="text-align: center;">
<strong>Headquarters:
</strong>
</style>more text here
</div>
This is the script I am using:
<script type="text/javascript">// < ![CDATA[
function on(el) {
if (document.getElementById(el)) {
document.getElementById(el).style.color="green";
};
};
function off(el) {
if (document.getElementById(el)) {
document.getElementById(el).style.color="";
};
};
// ]]></script>
So what you are saying is I can replace the getElementById with getElementByClassName then it will work?
This is the format I'm using, the first part of the text (Headquarters) is not showing up, but the second part (more text here) is fine.
You need to use document.getElementsByClassName, which returns a list of the objects with that class name:
var all = document.getElementsByClassName("bar");
for(var i = 0; i < all.length; i++){
var obj = all[i];
obj.style.fontWeight = 'bold';
}
<div id="foo" class="bar">hi</div>
<div class="bar">bye</div>
<div id="bar">sup</div>

how to use text tag in MVC 3 razor

i want to use regex on the views i have in MVC 3 page. how i can use
when i wrap them with text tag they not work ex:
<text> var pattern = #fjkfdkl</text>
i not want to put ## instead of # on every pattern. well what is the way and rule for using text tag in MVC
When you wrap something in a text tag your are saying to Razor that "this is text" not code. If you want code you can then do a code block like:
<text>#{ var pattern = fjkfdkl; }</text>
If you are doing this in some sort of loop you can just continue writing your code:
foreach(var o in listOfObjects) {
var pattern = fjkfdkl;
}
In the above example razor knows whats code and what is not. You can then expand on the above example if you want to put markup in the loop:
foreach(var o in listOfObjects) {
var pattern = fjkfdkl;
<text>
Hello World!
</text>
}
or
foreach(var o in listOfObjects) {
var pattern = fjkfdkl;
<p>
Hello World.
<p>
}
You only really need to use the <text></text> tags inside of loops where you don't have any html tags.
Razor is smart enough so when you open your tag inside a loop e.g. <p> it know until that tag is closed then its in markup. When it is closed it will then look for a } for the closing of a loop (or another html tag).