I have below span tag generated by custom tool (I can't ask it to generate in different way)
<span tabindex="0" > FINDME </span>
I want to write a script section within and to find the text "FINDME" and replace this with :
<span tabindex="0" style="color:red">FINDME</span>
or
<span tabindex="0">
<font color="red"> FINDME </font>
</span>
Basically I want to get the text colored. Also since I would have multiple span element coming that way so I had to search by text before replacing it.
I don't know how to code it so any help will be appreciated.
thanks !
This code will search for all the spans in your code and the one that have the text " FINDME " will get the color replaced. This solution is using jQuery
$(document).ready(function(){
$("span").each(function(){
if($(this).text() == ' FINDME '){
$(this).css('color','red');
}
});
});
https://jsfiddle.net/wearetamo/mdwkakzz/
The answer is :
<script> var span3 = document.querySelector('#dashboard_page_3_tab span'); span3.innerHTML = '<font color="red"> FINDME </font>' ; </script>
Related
I have this html code, I want get span text when click in reply, but I have multiple of this code in my page and this select only first item, this is my code
<div class="display-comment" style="margin-right: 10px">
<div class="userProfileImageForComment">
<img src="{{asset('profile-media/'.$comment->user->profileimg)}}" alt="">
</div>
<span id="userName">{{ $comment->user->username }}</span>
<p>{{ $comment->comment }}</p>
<div class="comentActionAndDate">
<span>
{{ jdate($comment->created_at)->ago() }}
</span>
<a id="reply">
reply
</a>
</div>
and script is
<script>
$('#reply').click(function(){
var username = "#" + $('#userName').text() + " ";
$('#comment').val('');
$('#comment').val(username);
$('#comment').after( "<input type=\"hidden\" name=\"comment_id\" value=\"{{ $comment->id }}\" />" )
});
</script>
you can do get your span text with this comnmand:
$('#userName')[0].innerText
anything else?
var spanText = $(".comentActionAndDate span").html();
I assume this is for a comments thread though, in which case you should use relative finding to locate the text.
$('#reply').click(function(){
var spanText = $(this).find(".comentActionAndDate").children("span").html();
// Other stuff you might want to do
});
You also should not be using an ID for that reply button if it is being generated more than once. You should also be using a <button> not an <a> tag as the a tag is used for links.
The most correct approach would be to use a function onclick of the reply button:
<button onclick="getSpan(this);">reply</button>
JS:
function getSpan(ele) {
var spanText = $(ele).find(".comentActionAndDate").children("span").html();
// Other stuff you might want to do
}
I need some RegEx for removing span tags with a specific class including the end tag but don't want to remove what's in between ...
I do not want to remove any other span tags
I cannot come up with it since I tend to forget the RegEx Tricks :(
I have this
<span class="SpellE">system_user.user_name</span>
<span>This is some text</span>
<Span class="OtherCLass">Some other text</span>
<span class="SpellE">system_user.userid</span>
And I want this result
system_user.user_name
<span>This is some text</span>
<Span class="OtherCLass">Some other text</span>
system_user.userid
Yes I need to tidy up some messy MS Html :)
Thanks in advance
The following regex should match what you want:
<span class=\"SpellE\">(.*)</span>
It matches the span with class='SpellE', creating a Group of the span text.
Then you should replace the match with Group 1.
In JavaScript, you can use it like this:
var testStr = '<span class="SpellE">system_user.user_name</span>\n'
+ '<span>This is some text</span>\n'
+ '<Span class="OtherCLass">Some other text</span>\n'
+ '<span class="SpellE">system_user.userid</span>\n';
var regex = /<span class=\"SpellE\">(.*)</span>/gi;
var result = testStr.replace(regex, '\1');
Now the result should be your wanted output.
I want to add a NewClass value to the class attribute and modify the text of the span using find/replace functionality with a pair of regular expressions.
<div>
<span class='customer' id='phone$0'>Home</span>
<br/>
<span class='customer' id='phone$1'>Business</span>
<br/>
<span class='customer' id='phone$2'>Mobile</span>
</div>
I am trying to get the following result using after search/replace:
<span class='customer NewClass' id='phone$1'>Organization</span>
Also curious to know if a single find/replace operation can been used for both tasks?
Regex can do this, but be aware the using regex to change HTML can have a lot of edge cases that you may not have accounted for.
This regex101 example shows those three <span> elements changed to add NewClass and the contents to be changed to Organization.
Other technologies, however, would be safer. jQuery, for example, could replace them regardless of the order of the attributes:
$("span#phone$1").addClass("NewClass");
$("span#phone$1").text("Organization");
So just be careful with it, and you should be fine.
EDIT
According to comments on the OP, you want to only change the span containing ID phone$1, so the regex101 link has been updated to reflect this.
EDIT 2
Permalink was too long to fit into a comment, so adding the permalink here. Click on the "Content" tab at the bottom to see the replacement.
You can use a regex like this:
'.*?' id='phone\$1'>.*?<
With substitution string:
'customer' id='phone\$1'>Organization<
Working demo
Php code
$re = "/'.*?' id='phone\\$1'>.*?</";
$str = "<div>\n <span class='customer' id='phone\$0'>Home</span>\n<br/>\n <span class='customer' id='phone\$1'>Business</span>\n<br/>\n <span class='customer' id='phone\$2'>Mobile</span>\n</div>";
$subst = "'customerNewClass' id='phone\$1'>Organization<";
$result = preg_replace($re, $subst, $str);
Result
<div>
<span class='customer' id='phone$0'>Home</span>
<br/>
<span class='customerNewClass' id='phone$1'>Organization</span>
<br/>
<span class='customer' id='phone$2'>Mobile</span>
</div>
Since your tags include preg_match and preg_replace, I think you are using PHP.
Regex is generally not a good idea to manipulate HTML or XML. See RegEx match open tags except XHTML self-contained tags SO post.
In PHP, you can use DOMDocument and DOMXPath with //span[#id="phone$1"] xpath (get all span tags with id attribute vlaue equal to phone$1):
$html =<<<DATA
<div>
<span class='customer' id='phone$0'>Home</span>
<br/>
<span class='customer' id='phone$1'>Business</span>
<br/>
<span class='customer' id='phone$2'>Mobile</span>
</div>
DATA;
$dom = new DOMDocument('1.0', 'UTF-8');
$dom->loadHTML($html, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
$xp = new DOMXPath($dom);
$sps = $xp->query('//span[#id="phone$1"]');
foreach ($sps as $sp) {
$sp->setAttribute('class', $sp->getAttribute('class') . ' NewClass');
$sp->nodeValue = 'Organization';
}
echo $dom->saveHTML();
See IDEONE demo
Result:
<div>
<span class="customer" id="phone$0">Home</span>
<br>
<span class="customer NewClass" id="phone$1">Organization</span>
<br>
<span class="customer" id="phone$2">Mobile</span>
</div>
I'm trying to verify the text in the span by using WebDriver. There is the span tag:
<span class="value">
/Company Home/IRP/tranzycja
</span>
I tried something like this:
driver.findElement(By.xpath("//span[#id='/Company Home/IRP/tranzycja']'"));
driver.findElement(By.cssSelector("span./Company Home/IRP/tranzycja"));
but none of this work.
Any help would be really appreciated. Thanks
More code:
<span id="uniqName_64_0" class="alfresco-renderers-PropertyLink alfresco-renderers-Property pointer small" data-dojo-attach-point="renderedValueNode" widgetid="uniqName_64_0">
<span class="inner" tabindex="0" data-dojo-attach-event="ondijitclick:onLinkClick">
<span class="label">
In folder:
</span>
<span class="value">
/Company Home/IRP/tranzycja
</span>
</span>
uniqName shouldn't be a target because are a lot of them and they are change.
There is a full html code:
http://www.filedropper.com/spantag
Here I am assuming you are trying to verify the text in the span tag.
i.e '/Company Home/IRP/tranzycja'
Try Below code
String expected String = "/Company Home/IRP/tranzycja";
String actual_String = driver.findElement(By.xpath("//span[#class='alfresco-renderers-PropertyLink alfresco-renderers-Property pointer small']//span[#class='value']")).getText();
if(expected String.equals(actual_String))
{
System.out.println("Text is Matched");
}
else
{
System.out.println("Text is not Matched");
}
You can try using xpath ('some text' can be replaced by variable like #Rupesh suggested):
driver.findElement(By.xpath("//span/span[#class='value'][normalize-space(.) = 'some text']"))
or
driver.findElement(By.xpath("//span/span[#class='value'][contains(text(),'some text')]"))
(Be aware that this xpath will find first matching element, so if there are span elements with text 'some text 1' and 'some text 2', only first occurrence will be found.)
Of course, those two methods will throw NoSuchElementException if element (with defined text) is not found on page. If you're using Java and if needed, you can easy catch that error and print proper message.
One possible xpath to find that <span> element :
//span[normalize-space(.) = '/Company Home/IRP/tranzycja']
I think your going to want to use something like
driver.findElement(By.xpath("//span[#id='/Company Home/IRP/tranzycja'])).getText();
the getText(); will get the text within that span
You can use text() method inside Xpath. I hope this will resolve your problem
String str1 = driver.findElement(By.xpath("//span[text()='/Company Home/IRP/tranzycja']")).getText();
System.out.println("str1");
Output = /Company Home/IRP/tranzycja
I have a clickable span, which has a button in it. I want the span to go to one href and the button to another. Here is the code I currently have:
<script>
function deleteAlbum(url) {
var txt;
var r = confirm("Do you really want to delete this album?");
if (r == true) {
window.location.href = url;
}
document.getElementById("demo").innerHTML = txt;
}
</script>
<a href='gallery.php?album=16022015NewTest'>
<span class='album'>
<p>New Test</p>
<p>16/02/2015</p>
<button class='delete' onClick=deleteAlbum('gallery.php?delete_album=16022015NewTest')>
Delete Album
</button>
</span>
</a>
Anyone have any ideas?
You want to read up on event bubbling - the quirksmode explanation in that answer is very nice.
Here's one possible fix for your example:
<script>
function gotoAlbum(albumId) {
window.location.href="gallery.php?album="+albumId;
}
function deleteAlbum(e, url) {
var r = confirm("Do you really want to delete this album?");
if (r == true) {
window.location.href = url;
}
e.stopPropagation();
}
</script>
<span class='album' onClick="gotoAlbum('16022015NewTest');" >
<p>New Test</p>
<p>16/02/2015</p>
<button class='delete' onClick="deleteAlbum(event, 'gallery.php?delete_album=16022015NewTest');">Delete Album</button>
</span>
Aside: as the other comments mention, a button inside an anchor is odd - it's not compliant HTML5 - see this question
You don't. Don't put <button> inside <a>.
According to atmd's comment restructure your html: Don't put button inside a. To be html conform use quotes for attribute values:
<div class="album">
<a href="gallery.php?album=16022015NewTest">
<p>New Test</p>
<p>16/02/2015</p>
</a>
<button class="delete" onClick="deleteAlbum('gallery.php?delete_album=16022015NewTest')">Delete Album</button>
</div>
So the a tag does not include the button tag. It is also a good idea not to have block elements inside inline elements. The span tag has already been changed to a div tag. You might also change the p tags to span. Then the html looks like this:
<div class="album">
<a href="gallery.php?album=16022015NewTest">
<span>New Test</span>
<span>16/02/2015</span>
</a>
<button class="delete" onClick="deleteAlbum('gallery.php?delete_album=16022015NewTest')">Delete Album</button>
</div>