I want to find all occurrences of "color: " inside my html below. But problem is that I get one previous character as well selected.
Note: I dont want "background-color:"
Please help
Test link - http://regexr.com/?385gg
HTML
<div id="divSection">
<div class="section-topcurve" style="background-color: rgb(224, 99, 32);">
<div class="app-input" id="Div11" onclick="CellDoubleClick(this,50)" style="color: rgb(156, 117, 156); background-color: rgb(224, 99, 32);">Item 1</div>
"asd-color:rgb(156,2,3);
"color: rgb(156, 117, 156);
<span class="additem">
<a id="Section" href="" onclick="return AddnewItem(this.id);">add item</a>
</span>
</div>
<div class="section-nocurve" id="divSection1390991308640" style="background-color: rgb(189, 114, 73); color: rgb(51, 51, 51);">
<div class="app-input" id="cellSection1390991308640" style="background-color: rgb(189, 114, 73); color: rgb(143, 24, 143);">New Item</div>
</div>
<div class="section-btmcurve" id="divSection1390991552843" style="background-color: rgb(189, 114, 73); color: rgb(143, 24, 143);">
<div class="app-input" id="cellSection1390991552843" style="background-color: rgb(189, 114, 73);">New Item</div>
</div>
</div>
This should do the trick for you:
[\s"](color:\s{0,1}.*?\))
Debuggex Demo
Related
I have a navbar with 3 levels, second level has a color code that correspond to his respective third level
What I'm trying to achieve is when a level is clicked, the background color of the level change to it's left border color ( For example "Réseau" bg should be full blue ) but I can't make it work properly since the levels are rendered with an NgFor* and the color is a variable coming from a switch() function.
If someone could lead me on what I'm doing wrong there I'd really appreciate it. Been trying NgStyle and NgClass but no success yet.
navbar.html
<div class="w-100 text-nowrap">
<nav class="nav nav-tabs w-25 flex-column flex-sm-row reduceHeight40 mainNav">
<input type="submit"
[value]="label_name[first]"
checked
[style.borderColor]="getColors(first)"
class="flex-sm-fill border-top-0 border-right-0 text-nowrap border-left-0 text-sm-center nav-link alu hovAlu"
*ngFor="let first of firstLevel"
(click)="dynamicFilter1(first); ">
</nav>
<div class="container alu dpf navbar-light">
<div class="nav nav-tabs flex-column text-nowrap thirdColor flex-sm-row navbar-light" >
<input [value]="label_name[second]" type="submit"
*ngFor="let second of dynamicLevels1; let index2 = index"
(click)="dynamicFilter2(second);selectedItem = index2;selectedItem2 = null"
[style.borderLeftColor]="getColors(second)"
[ngClass]="{'active': selectedItem === index2}"
class="flex-sm-fill ml-2 reduceHeight25 wdt10 text-sm-center nav-link"
>
</div>
</div>
<div class="container alu dpf navbar-light" *ngIf="ShowImage === false">
<div class="w-100">
<nav *ngIf="ShowTemplate"
class="nav nav-tabs d-flex flex-column ml-1 level3 flex-sm-row navbar-light " >
<input type="button" [value]="label_name[(third)]"
[style.borderColor]="getColors(third)"
class="flex-sm-fill text-nowrap reduceHeight25 smallText border-top-0 border-right-0 borderless border-left-0 wdt10 text-sm-center nav-link"
(click)="dynamicFilter3(third);selectedItem2 = index3"
[ngClass]="{'active': selectedItem2 === index3}"
*ngFor="let third of dynamicLevels2;let index3 = index">
</nav>
</div>
</div>
</div>
switch function
colors: any;
getColors(color) {
this.colors = color;
switch (color) {
case(1):
return 'rgb(0, 118, 172)';
case(2):
case(3):
case(4):
return 'rgb(0, 118, 172)';
case(5):
case(6):
case(7):
return 'rgb(255,185,29)';
case(8):
return 'rgb(3,160,128)';
case(9):
case(10):
case(11):
case(12):
return 'rgb(169,169,169)';
}
}
If you need more code tell me and I'll add it.
Thank's in advance for the help !
I honestly would leave style properties to style sheets alone.
That has several advantages, just to mention some:
let's you easily include colors from defined style guides, which greater business projects usually have
could be reused with mixins
doesn't run into many function calls (https://medium.com/showpad-engineering/why-you-should-never-use-function-calls-in-angular-template-expressions-e1a50f9c0496)
doesn't let you make syntax error, since your switch-case could return any invalid string
Have an example here:
scss:
$colors-map: (
'1': rgb(0, 118, 172),
'2': rgb(0, 118, 172),
'3': rgb(0, 118, 172),
'4': rgb(0, 118, 172),
'5': rgb(255, 185, 29),
'6': rgb(255, 185, 29),
'7': rgb(255, 185, 29),
'8': rgb(3, 160, 128),
'9': rgb(169, 169, 169),
'10': rgb(169, 169, 169),
'11': rgb(169, 169, 169),
'12': rgb(169, 169, 169)
);
#each $c in map-keys($colors-map) {
.color-#{$c} {
border-left: 5px solid map-get($colors-map, $c);
&.selected {
background-color: map-get($colors-map, $c);
}
}
}
html:
<ng-container *ngFor="let x of [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12]">
<div class="color-{{x}}" [ngClass]="{selected: x === selectedX}" (click)="selectedX = x">
I am element {{ x }}!
</div>
</ng-container>
See stackblitz:
https://stackblitz.com/edit/angular-ivy-thypkb?file=src/app/app.component.ts
I want to disable the blu border line in IonInput of IonicV2.
I try to add some CSS from the net but id doesn't work
<ionlist
id="list"
nolines
style="margin-top:150px;margin-bottom:15px"
visible
>
<ionitem
id="usernameItem"
detail="none"
wraptext="false"
sticky="false"
type="default"
style="display:flex;position:relative;top:0px;bottom:0px;border-top:1px none rgb(222, 222, 222);border-bottom:1px none rgb(0, 0, 0);height:68px"
>
<ioninput
id="username"
style="display:flex;border-bottom:1px solid rgb(225, 39, 39)"
label="Username"
labelposition="floating"
type="username"
></ioninput>
</ionitem>
<ionitem
id="passwordItem"
type="default"
style="border-top:1px none rgb(0, 0, 0);border-bottom:1px none rgb(222, 222, 222)"
detail="none"
wraptext="false"
sticky="false"
>
<ioninput
id="password"
style="display:flex;border-bottom:1px solid rgb(225, 39, 39)"
labelposition="floating"
label="Password"
type="password"
></ioninput>
</ionitem>
</ionlist>
Actually, the second ionInput field doesn't show the blue border line but I don't know why
I would try to remove the outline of the ioninput. Just add outline: none to the certain element (in this case ioninput).
I want to style the "active" link .login but it do not work. Where is the problem?
.active {
color: rgb(0, 148, 199);
}
<div id="nav">
<span id="logo"></span>
<span id="navTop">
<ul>
<li>.welcome</li>
<li>.register</li>
<li><a class="active" href="#">.login</a></li>
<li>.contact</li>
</ul>
</span>
<span id="navBottom">
<ul>
<li>.overview</li>
<li>.feature</li>
<li>.videos</li>
</ul>
</span>
</div>
This code seems to work fine. I would suggest you have some other css rule that is overriding this.
You can test this by adding !important to the css rule and see if it solves the problem. Then you need to track down what style is overriding it.
e.g.
.active {
color: rgb(0, 148, 199)!important;
}
.active {
color: rgb(0, 148, 199);
}
<div id="nav">
<span id="logo"></span>
<span id="navTop">
<ul>
<li>.welcome</li>
<li>.register</li>
<li><a class="active" href="#">.login</a></li>
<li>.contact</li>
</ul>
</span>
<span id="navBottom">
<ul>
<li>.overview</li>
<li>.feature</li>
<li>.videos</li>
</ul>
</span>
</div>
I want to click the image <img> w.r.t to the "TM100" mentioned in the td tag. Please can anyone give me the XPath.
I'm facing issue in the selecting the image. Because all the image are having the same xpath.
<tr>
<td>
<div id='xxx' class='avatar_standalone' ...>
<div class ='yyy'>
<div class ='zzz'>
<a oncontextmenu="return false" href="javascript:void(0)" onclick="xxx('MINE|XX0172', '2');>
<img class="newassetIcon assetIcon linkable" src="https://xxxx/servlet/servlet.ImageServer?id=015d00000020ZaWAAU&oid=00Dd0000000eu33&lastMod=1377179945000"/>
</a>
<span class="imgData" style="display: none;">MINE|XX0172</span>
</div>
</div>
</div>
</td>
<td style="border: 1px solid rgb(211, 211, 211);">XX0172</td>
<td style="border: 1px solid rgb(211, 211, 211); text-align: center;">6073.7</td>
<td style="border: 1px solid rgb(211, 211, 211);">TM2</td>
</tr>
<tr>
<td>
<div id='xxx' class='avatar_standalone' ...>
<div class ='yyy'>
<div class ='zzz'>
<a oncontextmenu="return false" href="javascript:void(0)" onclick="xxx('MINE|XX0172', '2');>
<img class="newassetIcon assetIcon linkable" src="https://xxxx/servlet/servlet.ImageServer?id=015d00000020ZaWAAU&oid=00Dd0000000eu33&lastMod=1377179945000"/>
</a>
<span class="imgData" style="display: none;">MINE|XX0172</span>
</div>
</div>
</div>
</td>
<td style="border: 1px solid rgb(211, 211, 211);">XX0172</td>
<td style="border: 1px solid rgb(211, 211, 211); text-align: center;">1073.7</td>
<td style="border: 1px solid rgb(211, 211, 211);">TM3</td>
</tr>
<tr>
<td>
<div id='xxx' class='avatar_standalone' ...>
<div class ='yyy'>
<div class ='zzz'>
<a oncontextmenu="return false" href="javascript:void(0)" onclick="xxx('MINE|XX0172', '2');>
<img class="newassetIcon assetIcon linkable" src="https://xxxx/servlet/servlet.ImageServer?id=015d00000020ZaWAAU&oid=00Dd0000000eu33&lastMod=1377179945000"/>
</a>
<span class="imgData" style="display: none;">MINE|XX0172</span>
</div>
</div>
</div>
</td>
<td style="border: 1px solid rgb(211, 211, 211);">XX0172</td>
<td style="border: 1px solid rgb(211, 211, 211); text-align: center;">8073.7</td>
<td style="border: 1px solid rgb(211, 211, 211);">TM100</td>
</tr>
Please check this one, might be this could works for you:
//tr[descendant::td[contains(text(),'TM100')]]//img[#class='newassetIcon assetIcon linkable']
I have tested the above code using this:
//tr[descendant::td[contains(text(),'TM100')]]//td[contains(text(),'XX0172')]
If you want to get the img element you can use the following XPath
//tr[td = 'TM100']/div[#id = 'xxx']/div[#class = 'yyy']/div[#class = 'zzz']/a/img
If you want to click the image you might want to select the a, so the following works:
//tr[td = 'TM100']/div[#id = 'xxx']/div[#class = 'yyy']/div[#class = 'zzz']/a
I've written some small HTML code to use as a signature in Thunderbird. The display is perfect and works without error for emails received by Thunderbird. However when an email from me is received in Outlook, color information is missing.
Here is my HTML code (with names and identifying information replaced)
<html>
<div class="Section1">
<p><b><span style="font-size: 10pt;
font-family:Arial,sans-serif; color: rgb(35, 53,
64);padding-left: 10px;">
<!-- NAME -->
First </span>
<span style="font-size: 10pt;
font-family:Arial,sans-serif; color: rgb(223, 93,
39);"> Last <br>
</span></b>
<span style="font-size: 9pt; font-family:
Arial,sans-serif; color: rgb(35, 53, 64);padding-left:
10px;">
<!-- Job Title -->
Mobile App Developer
<br>
</span>
<!--COMPANY NAME--> <b><span style="font-size: 11pt;
font-family: Arial,sans-serif; color: rgb(223, 93,
39);padding-left: 10px;">Company</span></b><b><span
style="font-size: 11pt; font-family: Arial,sans-serif;
color: rgb(35, 53, 64);">Name ®</span></b></p>
<p>
</span> <span style="font-size: 9pt; font-family:
Arial,sans-serif; color: rgb(35, 53, 64);padding-left:
10px;"><a class="moz-txt-link-abbreviated"
href="mailto:email#email.com" style="color: rgb(35,
53, 64);text-decoration:none;">
<!--EMAIL ADDRESS--> email#email.com</a></span> | <span
style="font-size: 9pt; font-family: Arial,sans-serif; color:
rgb(223, 93, 39);">My.Name Skype</span><br>
<b><span style="font-size: 10pt; font-family:
Arial,sans-serif; color: rgb(35, 53, 64);padding-left:
10px;"><a class="moz-txt-link-abbreviated"
href="http://www.google.com" style="color: rgb(35, 53,
64); text-decoration:none;">
<!--WEBSITE URL--> www.google.com</a></span></b></p>
</div>
</body>
</html>
Outlook:
Thunderbird:
I'm not sure what the issue is as I have very little experience with HTML. I took most of this code from someone else's signature block.
Try using the hexadecimal code instead of rgb(r, g, b).
For example, replace rgb(35, 53, 64) occurences with #233540.
You can use http://www.javascripter.net/faq/rgbtohex.htm to figure out the hex code.