Say I have a div that shows some text like this:
<div id="some_text">abc_123+xyz</div>
I would like to set a single character's color in RED, if it's neither numeric nor alphabetic.
This is the regular expression I used to identify numeric and alphabetic characters: [0-9A-Za-z], but I got stuck now...
How can I do this, is this possible?
Not possible using only CSS, because the characters are not in a separate element that can be styled.
You'll have to add some JavaScript to create the required elements, for example:
const div = document.getElementById('some_text');
div.innerHTML = div.innerHTML.replace(
/([^a-z0-9])/gi,
'<span style="color: red">$1</span>'
);
<div id="some_text">abc_123+xyz</div>
Related
Im trying to select all <path>'s but only ones that conatin a class that INCLUDES a str.
as an example if i have 3 elements
<h1 class="hello"/>
<h2 class="bye" />
<h3 class="fix" />
I want to be able to say everything with a class containing an e, change color to red.
which would make
h1 and h2 red.
Im using d3.selectAll(path[class=*.${str}]);
(Doing this with d3.selectAll(path:not([class=*.${str}])`) seems to work for selecting everything without that class)
Like Pete said, your * is on the wrong side of the equal sign. You also don't need to add . in your selector. Something like this should work for you:
d3.selectAll(`path[class*=${str}]`)
In the following,
<section id="section2" class="MightChange1 MightChange2">
<div id="dynamicIdxxx" class="dynamic1 dynamic2 dynamic3">
<div id="againDynamic" ..>
<div id="someDynamicCanBeRelayed" class="xyz">
<button id="dynmaicBtnxx" class="Cannot be relayed">
<span ....>
<span id="dynamic23" class="PartOfDoesntChange">
<bdi> show INTEGER more details</bdi>
How to select the span (with id=dynamic23) using text of bdi (which INTEGER changes).
I could write like following
//*[#id='section2']//span/bdi[contains(text(),'more fields')]/ancestor::button")
The challenge is, sometimes below
<span id="dynamic23" class="PartOfDoesntChange">
<bdi> show INTEGER more details</bdi>
will be changed to (without bdi tag)
<span id="dynamic23" class="PartOfDoesntChange"> show INTEGER more details <span>
One option to handle is I can use two xpath's with and without bdi using selenium OR conditions. Either way, I would get the result and use that element.
Is there any better alternatives for such scenarios or by using css selectors?
try this simple one //span[contains(., 'show INTEGER more details')], Don't replace the . to text(), otherwise it will only match one element
You can use UNION operator |. See my example below.
//*[#id='section2']//span/bdi[contains(text(),'more fields')]/ancestor::button") | //*[#id='section2']//span[contains(text(),'more details')]/ancestor::button")
To select the span element using the text show INTEGER more details you can use the following xpath :
//button[#id='dynmaicBtnxx']//*[contains(.,'show INTEGER more details')]//preceding::span[1]
Note : Seems values are dynamic so you may have to induce WebDriverWait for the element as well.
This might help:
.//*[contains(., 'show INTEGER more details')]/ancestor::button[starts-with(#id,'dynmaicBtn')]
The * (star) at the start will select the tag with your required text whether it is span or bdi. Ancestor will select a button whose id starts-with your text followed by changing int's.
Suppose you have html that contains the following:
<div title="aaa"></div>
<div title="example"></div>
<div title="exam
ple"></div> // the enter key has been pressed after the substring "exam" in the title attribute
I understand that if I wanted to select for the second and third divs I could use the following CSS:
div[title^="exam"] {....}
But how would the third div be selected exclusively? I have Codepenned the following selectors:
div[title="exam\nple"] {...}
div[title="exam\x0Aple"] {...} // line feed ---> hex
div[title="exam\u000Aple"] {...} // line feed ---> unicode
None of these worked as I intended (i.e., selecting the third div exclusively - no elements were selected for at all).
How would one select in this case for an attribute (title here) with a value which contains a line feed using title= ? (and not title^= or title|=, etc.)
Note - I have already read this post and this post for background info but I'm still not sure how to accomplish this.
From Characters and case - escaped characters,
backslash escapes allow authors to refer to characters they cannot
easily put in a document. In this case, the backslash is followed by
at most six hexadecimal digits (0..9A..F), which stand for the ISO
10646 character with that number, which must not be zero.
A new line character has the code U+000A. So in CSS you can escape it as \a or \00000a.
div[title="exam\a ple"] { font-size: 2em; color: green;}
<div title="aaa">aaa</div>
<div title="example">example</div>
<div title="exam
ple">exam[newline]ple</div>
May be you can just use div[title^="exam\00000a"] and it works
Check Here on Codepen
I will have users input text in a textbox to set as their identifier, however, they can only enter 1 line of text. I have no way of changing that.
I would like to add CSS that takes the string of text and edits a | character and changes it to a <br>
The string of text they will type will be something like this: 1234-5678-1234 | Jim
I want it to show up like this:
1234-5678-1234
Jim
I'm guessing the code might look like this:
p:contains('|') {code for an enter and float right}
I would be posting this as comment but I need 50 rep :)
Just this: What you are trying to do needs JS. You should give RegExp a try. There's not a way to do that using pure css.
It is not possible to select an element on the basis of its textual content, except for the special case of empty content. There was once (in 2001) a draft suggesting a :contains(...) selector, but this feature was removed as the draft progressed (to eventually become Selectors Level 3 recommendation).
Still less is there a way to select something inside an element based on its content.
Besides, adding <br> would not be possible. You cannot add tags or elements with CSS, only textual content via pseudo-elements.
Moreover, if the input is read in an input element, you cannot make its content displayed in two lines. If the user input is actually echoed an in different element, like p element, then it is programmatically copied there, so the question is why the change is made there. You can modify the content with JavaScript, and it would be rather simple to replace any | by <br> in the content of a p element.
You should give a try using <div contenteditable="true"></div>. You would be able to solve your issue, using JS by wrapping and adding tags as necessary. Also, textbox wont support multiline & formatting.
A good read for contenteditable attribute on MDN: https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Content_Editable
I did some testing and created the following RegExp: Example Here
<input type="text" id="demo" value="123-456-7890 | John Doe" size="35">
<button onclick="myFunction()">Try it</button>
<p style="text-align:left;" id="number"></p>
<p style="text-align:right;" id="name"></p>
<script>
function myFunction() {
var str = document.getElementById("demo").value;
strnum = str.indexOf('|');
var name = str.slice(strnum+1);
var number = str.slice(0,strnum);
document.getElementById("number").innerHTML = number;
document.getElementById("name").innerHTML = name;
}
</script>
Is this what you want?
Can anyone tell me if it's possible to have a the text in a single label control displayed in more than one style.
e.g. I have a label
I want the the text to appear with the style "english" (which it does), but I want the "th" of the text to be different (bold, different colour, whatever).
So, the question in a nutshell is: Is there a flex equivalent of the following HTML?
<p class="english">bro<span class="highlight">th</span>er</p>
If not, can anyone think of a good workaround, short of having to separate the text into multiple label controls (thus making alignment a bit of a nightmare)?
Thanks to anyone who can help!
Dan
yes, try the following
var la : Label;
la.htmlText = '<TEXTFORMAT LEADING="3"><P ALIGN="LEFT"><FONT FACE="Arial" SIZE="14" COLOR="#000000" LETTERSPACING="0" KERNING="1">what ever texst you wish</FONT><FONT FACE="Verdana"SIZE="18" COLOR="#848484" LETTERSPACING="0" KERNING="1">more text here</FONT></P></TEXTFORMAT>';
Yes, it's possible. Take a look at the Label.htmlText documentation in the livedocs which explains how to set markup on a Label control, e.g.
<mx:Label>
<mx:htmlText><![CDATA[This is an example of <b>bold</b> markup]]></mx:htmlText>
<mx:Label/>
The Text.htmlText reference has a full list of the tags supported and gives detail about the Paragraph and Span tags :
Paragraph tag
The <p> tag creates a new paragraph.
The text field must be set to be a multiline text field to use this tag.
The <p> tag supports the following attributes:
align: Specifies alignment of text within the paragraph; valid values are left, right, justify, and center.
class: Specifies a CSS style class defined by a flash.text.StyleSheet object.
Span tag
The <span> tag is available only for use with CSS text styles.
It supports the following attribute:
class: Specifies a CSS style class defined by a flash.text.StyleSheet object.
Ultimately, there are quite a few ways to do what you want.