I have code like below:
<div class="new-modal *max-height--xxl flex--0-1">
I want to know what does *max-height--xxl mean here?
This is a different question to wildcard * in CSS for classes
I want to ask the * prefix in html class reference.
Nothing in a global sense. In HTML5 there are no restrictions on what characters a class attribute can contain (with the exception of the space character, which is used to separate multiple classes).
For instance, the following HTML is valid:
<figure class="foo bar baz %foo *bar _baz 'foo (bar )baz"></figure>
Here foo is one class, %foo is a second unrelated class and 'foo is a third unrelated class.
The following is also valid:
<figure class="%*_'()"></figure>
The HTML5 specification states that the class attribute must be a set of space-separated tokens. It goes on to define these as:
A set of space-separated tokens is a string containing zero or more words (known as tokens) separated by one or more space characters, where words consist of any string of one or more characters, none of which are space characters.
It's worth noting that these symbols will possibly need escaping (by prefixing them with the a backslash (\) character) in order to be targeted by a CSS selector.
.\%\*\_\'\(\) {
color: red;
}
<figure class="%*_'()">
Hello, world!
</figure>
It doesn't mean anything special. The class name just begins with a * character.
It might be a hack designed to change the class name and, effectively, comment it out so it no longer matches a CSS selector.
var c = document.querySelector('div').classList;
var list = [];
for (var i = 0; i < c.length; i++) {
list.push(c[i]);
};
document.body.innerHTML = list.join(" / ");
<div class="new-modal *max-height--xxl flex--0-1"></div>
Related
I'm trying to extract the price from the following HTML.
<td>$75.00/<span class='small font-weight-bold text-
danger'>Piece</span></small> *some more text here* </td>
What is the regex expression to get the number 75.00?
Is it something like:
<td>$*/<span class='small font-weight-bold text-danger'>
The dollar sign is a special character in regex, so you need to escape it with a backslash. Also, you only want to capture digits, so you should use character classes.
<td>\$(\d+[.]\d\d)<span
As the other respondent mentioned, regex changes a bit with each implementing language, so you may have to make some adjustments, but this should get you started.
I think you can go with /[0-9]+\.[0-9]+/.
[0-9] matches a single number. In this example you should get the number 7.
The + afterwards just says that it should look for more then just one number. So [0-9]+ will match with 75. It stops there because the character after 5 is a period.
Said so we will add a period to the regex and make sure it's escaped. A period usually means "every character". By escaping it will just look for a period. So we have /[0-9]+\./ so far.
Next we just to add [0-9]+ so it will find the other number(s) too.
It's important that you don't give it the global-flag like this /[0-9]+\.[0-9]+/g. Unless you want it to find more then just the first number/period-combination.
There is another regex you can use. It uses the parentheses to group the part you're looking for like this: /<td>\$(.+)<span/
It will match everything from <td>$ up to <span. From there you can filter out the group/part you're looking for. See the examples below.
// JavaScript
const text = "<td>$something<span class='small font-weight..."
const regex = /<td>\$(.+)<span/g
const match = regex.exec(text) // this will return an Array
console.log( match[1] ) // prints out "something"
// python
text = "<td>$something<span class='small font-weight..."
regex = re.compile(r"<td>\$(.+)<span")
print( regex.search(text).group(1) ) // prints out "something"
As an alternative you could use a DOMParser.
Wrap your <td> inside a table, use for example querySelector to get your element and get the first node from the childNodes.
That would give you $75.00/.
To remove the $ and the trailing forward slash you could use slice or use a regex like \$(\d+\.\d+) and get the value from capture group 1.
let html = `<table><tr><td>$75.00/<span class='small font-weight-bold text-
danger'>Piece</span></small> *some more text here* </td></tr></table>`;
let parser = new DOMParser();
let doc = parser.parseFromString(html, "text/html");
let result = doc.querySelector("td");
let textContent = result.childNodes.item(0).nodeValue;
console.log(textContent.slice(1, -1));
console.log(textContent.match(/\$(\d+\.\d+)/)[1]);
I've been learning regex and for that I have been working on Hackerrank problems. I came across a problem where I am asked to remove html format and only keep whatever is inside an anchor tag's reference (the value of the href part), and the text inside the tag, then present this separated by a comma.
I came up with the following code to extract such information:
public static void main(String[] args) {
Scanner s = new Scanner(System.in);
int n = s.nextInt();
s.nextLine();
for (int i = 0; i < n; i++) {
String line = s.nextLine();
Pattern p = Pattern.compile("(.*)<a href=\"([^\"]+)\"([^<>]*)>(<\\w+>)*([^<>]+)</a>(</\\w+>)*");
Matcher m = p.matcher(line);
while (m.find()) {
System.out.println(m.group(2).trim() + "," + m.group(5).trim());
}
}
}
This code, when presented with cases such as <p>text</p> Passes and outputs folder/page,text
But if the input has multiple <a> tags, it will only grab the last occurrence of it and output that, instead of outputting all possible matches for that single input. Why is this happening? Please don't feel obliged to answer my question fully if you think I can answer it myself with just a hint. Thank you for any answers in advance
I have a variable that contains a string value in the form of some percentage eg. '10%' I want to use that value to build a class name to add to my html element if the percentage is anything above '0%'. I thought this would be easy using a sass loop but I can't seem to get the class name constructed correctly.
I thought it would look something like this.
#for $i from 1 through 100{
.highlight-#{$i}% {
// styling
}
}
.highlight-0% {
// styling
}
I have tried several variations:
.highlight-#{$i + '%'} { // styling }
.highlight-#{$i}${'%'} { // styling }
I don't know if this is even possible since '%' may be reserved.
I am adding the html just in case someone can suggest a way to remove the % in there. This is what I would like to be able to do:
<tr><td class="pad-10 highlight-${publisher.numViewsPercentage}" align="center">${publisher.numViewsPercentage}</td></tr>
Not only is % a reserved character in Sass, the bigger issue is it's not an allowed character in CSS selector names. So even if you could make Sass compile the resulting class names won't be valid and won't work.
For the most part selector names need to use only letters, numbers, underscore and hyphens.
.nopercent {
color: red;
}
.percent% {
color: red;
}
<div class="nopercent">
An element withOUT a percent sign in the class.
</div>
<div class="percent%">
An element with a percent sign in the class.
</div>
% is a placeholder character in SASS since version 3.2.
You should just use it for "invisible" extendeds.
I'm assuming it's not possible, but just in case it is or someone has a nice trick up their sleeves, is there a way to target certain characters using CSS?
For example make all letters z in paragraphs red, or in my particular case set vertical-align:sup on all 7 in elements marked with the class chord.
Hi I know you said in CSS but as everybody told you, you can't, this is a javascript solution, just my 2 cents.
best...
JSFiddle
css
span.highlight{
background:#F60;
padding:5px;
display:inline-block;
color:#FFF;
}
p{
font-family:Verdana;
}
html
<p>
Let's go Zapata let's do it for the revolution, Zapatistas!!!
</p>
javascript
jQuery.fn.highlight = function (str, className) {
var regex = new RegExp(str, "gi");
return this.each(function () {
this.innerHTML = this.innerHTML.replace(regex, function(matched) {return "<span class=\"" + className + "\">" + matched + "</span>";});
});
};
$("p").highlight("Z","highlight");
Result
That's not possible in CSS. Your only option would be first-letter and that's not going to cut it. Either use JavaScript or (as you stated in your comments), your server-side language.
The only way to do it in CSS is to wrap them in a span and give the span a class. Then target all spans with that class.
As far as I understand it only works with regular characters/letters. For example: what if we want to highlight all asterisk (\u002A) symbols on page. Tried
$("p").highlight("u\(u002A)","highlight");in js and inserted * in html but it did not worked.
In reply to #ncubica but too long for a comment, here's a version that doesn't use regular expressions and doesn't alter any DOM nodes other than Text nodes. Pardon my CoffeeScript.
# DOM Element.nodeType:
NodeType =
ELEMENT: 1
ATTRIBUTE: 2
TEXT: 3
COMMENT: 8
# Tags all instances of text `target` with <span class=$class>$target</span>
#
jQuery.fn.tag = (target, css_class)->
#contents().each (index)->
jthis = $ #
switch #.nodeType
when NodeType.ELEMENT
jthis.tag target, css_class
when NodeType.TEXT
text = jthis.text()
altered = text.replaceAll target, "<span class=\"#{css_class}\">$&</span>"
if altered isnt text
jthis.replaceWith altered
($ document).ready ->
($ 'div#page').tag '⚀', 'die'
I am trying to build a regex for lex that match the bold text in mardown syntax. For example: __strong text__ I thought this:
__[A-Za-z0-9_ ]+__
And then replace the text by
<strong>Matched text</strong>
But in Lex, this rule causes the variable yytext to be __Matched Text__. How could I get rid of the underscores? It would be better to create a regex that does not match the underscores or proccess the variable yytext to remove it?
With capturing groups it would be easer, because I would only need the regex:
__([A-z0-9 ]+)__
And use \1. But Lex does not support capturing groups.
Answer
I finally take the first option offer by João Neto, but a little modified:
yytext[strlen(yytext)-len]='\0'; // exclude last len characters
yytext+=len; // exclude first len characters
I've tried with Start conditions as he mentioned as second option, but did not work.
You can process yytext by removing the first and last two characters.
yytext[strlen(yytext)-2]='\0'; // exclude last two characters
yylval.str = &yytext[2]; // exclude first two characters
Another option is to use stack
%option stack
%x bold
%%
"__" { yy_push_state(bold); yylval.str = new std::string(); }
<bold>"__" { yy_pop_state(); return BOLD_TOKEN; }
<bold>.|\n { yylval.str += yytext; }