How to make XPath Search in Div with <b> working? - javascript

I am trying to search following text in HTML.
The file <b> abc.txt </b> is not available.
I have following xpath I am using
//div[contains(string(),'The file <b> abc.txt </b> is not available')]
But this is not working. If I use the following Xpath , it works though.
//div[contains(string(),'is not available')]
As I want to search for full text, please suggest how to handle this.

<b>...</b> is not a part of string representation, but child node of div. Try below XPath to match required div node:
//div[.="The file abc.txt is not available." and b="abc.txt"]
If it doesn't matter whether "abc.txt" is bold text, you can simplify to just
//div[.="The file abc.txt is not available."]
If "The file abc.txt is not available." is just a part of div text:
//div[contains(., "The file abc.txt is not available.")]

Related

How to change color of a search word in HTML?

So in my HTML file, I have
<p class = "result"> {{searchResult}} </p>
where {{searchResult}} is essentially my result.
So if I searched for the term "hot",
{{searchResult}} would contain a string containing the word "hot" in a document.
For example:
"This is hot"
Everything shows up in the webpage perfectly fine but I want to change the color of the search term within the string.
I tried modifying the part where it should output the content in my JS file:
content: result.replace(searchTerm, <span class= "search">searchTerm</span>)
where the class "search" is just changing the color of the word.
But it shows up as the webpage as:
This is <span class = "search">hot</span>
How would I make it so that it changes the color only of the search term?
You're looking to change the style of the html content. This is done using CSS. You can do this in one of three ways:
1) Edit the color of the paragraph using in-line CSS: <p class="result" style="color:red;"> {{searchResult}} </p>
2) Create an external .css file and link your html file to it in the <head> of the document. Use similar css there:
.result {
color:red;
}
3) Edit the DOM using Javascript to similarly change the color:
document.querySelector('.result').style.color='red';

How can I Wrap contents inside some html tag without affecting any html tag using Regex

I'm parsing a block of text through a regex pattern and I need to wrap the resultant text within a span tag.
I am usign this library http://xregexp.com/
The siblings of the text may or may not contain tags.
Example Input:
<span><span>T</span><span>e</span><span><span>st</span></span> <b>1</b> </span> . <i>2</i>
From the above input, I got the text using jQuery getText() and parsed into the pattern.
((?<first>\\b[Tt][Ee][Ss]([A-z]{0,3})?)(?<one>(\.?\\s?))(?<Numberone>[0-9]{0,3}?)(?<two>(\.?\\s?\-?))(?<NumberTwo>[0-9]{0,3}))';
I'm using XRegExp 4.2.0 Library.
Output from regex :
first : Test
Numberone : 1
NumberTwo : 2
What I'm trying to achieve: <span id="test"><span>T</span><span>e</span><span><span>st</span></span><span>
<span id="1"><span> <b>1</b> </span></span> .
<span id="2"> <i>2</i></span>
I can't think of a suitable logic to execute it using Jquery.
Appreciate any Help. Thanks !

Selenium get element from menu without ID

I am working with Selenium Web driver and need to reference am item in a javascript menu that has no id. I need to know how I can get the following web element in Selenium. I am not very proficient with javascript or HTML so any help is needed.
<td class="menu" colspan="2">
<a href="javascript:Redirect('marks',0);" class="menu">
Display Text Here
</a>
</td>
To get the element with text as Display Text Here you can use either of the following Locator Strategies:
LinkText:
"Display Text Here"
CssSelector:
"td.menu>a.menu"
XPath:
"//td[#class='menu']/a[#class='menu'][contains(.,'Display Text Here')]"
You can locate this element by xPath:
//a[contains(., 'Display Text Here')]
so in JavaScript it will be like this:
driver.findElement(By.xpath("//a[contains(., 'Display Text Here')]")).click();
Here you will find more information.
You can use this linkText :
Note that you should always choose linkText when compared to xpath and cssSelector.
driver.findElement(By.linkText("Display Text Here")).click();

How to use html UTI symbol shortcuts like ™ with angularjs ng-repeat?

I'm repeating the following element:
<li ng-repeat="feature in pTab.features">
<p>{{feature.summary}}</p>
</li>
feature.summary is a string from a .txt file and contains ™ where trademark symbols should be displayed.However the page simply displays ™ as text on the page.
Looking at the W3 Reference, I thought this should display as a tradmark symbol on the page.
Does this not work with AngularJS or do I need to correct something?
Thanks!
You need to use ngBindHtml
Evaluates the expression and inserts the resulting HTML into the element in a secure way.
Code
<p ng-bind-html="feature.summary"></p>

JQuery: select using markup tags?

I am dynamically finding the string of open tag within a page and want to use JQuery to get the text of the element that the open tag corresponds to.
For example, suppose this is my page:
<h1 class="articleHeadline">
<NYT_HEADLINE version="1.0" type=" ">
The Arab Awakening and Israel
</NYT_HEADLINE>
</h1>
<author id="monkey" class="mainauthorstyle">
<h6 class="byline">
By
<a rel="author" href="http://topics.nytimes.com/top/opinion/editorialsandoped
/oped/columnists/thomaslfriedma/index.html?inline=nyt-per" title="More Articles
by Thomas L.Friedman" class="meta-per">
THOMAS L. FRIEDMAN
</a>
</h6>
</author>
I find the '<author id="monkey" class= "mainauthorstyle">' open tag string, and want to get $("author" id["monkey"] class["mainauthorstyle"]).text() --> By THOMAS L. FRIEDMAN. Is there a simple way to turn the open tag markup into a selector? Should I just parse it with regex?
Edit: I don't know beforehand what element I want. My code looks through the page and comes up with '<author id="monkey" class= "mainauthorstyle">' as the beginning of the element. I don't know the literal beforehand. I run this code on arbitrary webpages.
author#monkey.mainauthorstyle
Here's how you do it: http://jsfiddle.net/peduarte/MgbCX/
I'm having a bit of trouble understanding your question. If you just want the text, use the following:
$("author#monkey.mainauthorstyle").text();
If you want to select the element only if "THOMAS L. FRIEDMAN" is the author, then:
$("author#monkey.mainauthorstyle:contains('THOMAS L. FRIEDMAN')")
// See http://api.jquery.com/contains-selector/ for more info on the :contains() selector
UPDATED AFTER YOUR EDIT:
If you are able to determine that you want to select the "text" of the author element with id of "monkey" and class of "mainauthorstyle", you simply need to build a jQuery selector out of those bits of information. From there you can use the text() or html() methods on the resulting jQuery object to get the contents of that element.
As my example above showed:
$("author#monkey.mainauthorstyle").text();
or
$("author#monkey.mainauthorstyle").html();
Note that the selector used is probably overkill as you should be able to simply select the element by its id.
$("#monkey").text();

Categories