I am preforming the following ack-grep inside of a bash script and, while it mostly works .. I am getting inconsistent results. The line I am using is:
ack-grep '(?<=imageserver).*(?=png)'
This is Perl type Regex (supported by both ack_grep and plain grep) -- I am searching for everything between imageserver and png. While it mostly works -- I get inconsistent results IE:
Why is it that you'll see it matched the first umpteen lines, then it matches something that it (in theory) should have two or three matches WITHIN. It's obvious the last "block" should have been matched after the first iteration of png however it skipped it multiple times and finally settled --
So, the first couple returning are my desired result -- And the last highlighted block is the "bad" result. How do I get consistent results here? I'll paste some text that returns this result for copy/paste posterity (verifiable example). If you copy and paste the following into a text file, you should get the same results I am getting.
Is this a syntax error, a misunderstanding, or a bug? Hate when things should work but don't ... The banes of development.
.mobile_menu_icon { display:block;cursor:pointer;width:100%;height:40px;margin:0 auto;background-image:url('/imageserver/default_images/four_lines_40x19.png');
.button-error { display:inline-block;width:14px;height:13px;background:url('/imageserver/GlobalMedia/Icons/deleteIcon.png') no-repeat;background-size:16px 16px;background-position:center;opacity:1;transition:all ease-in-out 150ms; }
.button-finished { display:inline-block;width:14px;height:13px;background:url('/imageserver/GlobalMedia/Icons/checkmark.png') no-repeat;background-size:16px 16px;background-position:center; }
background:url('/imageserver/confirm/ie.png');
background:url('/imageserver/confirm/buttons.png') no-repeat;
background:url('/imageserver/confirm/buttons.png') no-repeat;
.capItem { width:30px;height:30px;background:url('/imageserver/styles/captchaShapesWhite.png');background-repeat:no-repeat;background-size:auto 35px;display:inline-block;margin:0 3px; }
.form_button_error { display:inline-block;width:14px;height:13px;background:url('/imageserver/GlobalMedia/Icons/deleteIcon.png') no-repeat;background-size:13px 13px;background-position:center;opacity:1;transition:all ease-in-out 150ms; }
.form_button_finished { display:inline-block;width:14px;height:13px;background:url('/imageserver/GlobalMedia/Icons/checkmark.png') no-repeat;background-size:16px 16px;background-position:center; }
#mega_slider_wrapper,.shadow{width:100%;position:relative}.nav-arrows,.nav-dots,.shadow{display:none}.nav-arrows a,.nav-dots span,.nav-options span{cursor:pointer;border-radius:50%}#mega_slider_wrapper{background:0 0;overflow:hidden}#mega_slider_wrapper img,.mega_slide_image{width:100%}.shadow{height:168px;margin-top:-110px;background:url(/imageserver/AdminMedia/moduleImages/megaslider/shadow.png) bottom center no-repeat;background-size:100% 100%;z-index:-1}.sb-description h3{text-shadow:1px 1px 1px rgba(0,0,0,.3)}.sb-description h3 a{color:#4a3c27;text-shadow:0 1px 1px rgba(255,255,255,.5)}.nav-arrows a{width:42px;height:42px;background:url(/imageserver/AdminMedia/moduleImages/megaslider/nav.png) top left no-repeat #cbbfae;position:absolute;top:50%;left:2px;text-indent:-9000px;opacity:.9;box-shadow:0 1px 1px rgba(255,255,255,.8)}.nav-arrows a:first-child{left:auto;right:2px;background-position:top right}.nav-arrows a:hover{opacity:1}.nav-dots{text-align:center;position:absolute;height:30px;width:100%;left:0}.nav-dots span{display:inline-block;width:16px;height:16px;margin:3px;box-shadow:0 1px 1px rgba(255,255,255,.6),inset 0 1px 1px rgba(0,0,0,.1)}.nav-dots span.nav-dot-current{box-shadow:0 1px 1px rgba(255,255,255,.6),inset 0 1px 1px rgba(0,0,0,.1),inset 0 0 0 3px #cbbfae,inset 0 0 0 8px #fff}.nav-options{width:70px;height:30px;position:absolute;right:70px;bottom:0;display:none}.nav-options span{width:30px;height:30px;background:url(/imageserver/AdminMedia/moduleImages/megaslider/options.png) top left no-repeat #cbbfae;text-indent:-9000px;opacity:.7;display:inline-block}.sb-slider,.sb-slider li>img{width:100%}.nav-options span:first-child{background-position:-30px 0;margin-right:3px}.nav-options span:hover{opacity:1}.sb-slider{margin:0 auto;position:relative;overflow:hidden;list-style-type:none;padding:0;max-width:2000px!important}.sb-slider li{margin:0;padding:0;display:none}.sb-slider li>a{outline:0}.sb-slider img{max-width:100%;display:block}.sb-description{width:100%;max-width:1124px;margin:0 auto;padding:30px 10px 10px;height:900px;top:0;left:10px;right:10px;z-index:10;position:absolute;color:#fff;-webkit-transition:all .2s;-moz-transition:all .2s;-o-transition:all .2s;-ms-transition:all .2s;transition:all .2s;background:rgba(40,40,40,.2);text-shadow:#000 0 0 7px}.sb-description h2,.sb-description h3{line-height:1.1;margin:4px 0;padding:4px 0}.nav-dots span,.slider_button{transition:all ease-in-out 180ms}.sb-description h2{font-size:42px}.sb-description h3{font-size:22px}.sb-perspective{position:relative}.sb-perspective>div{position:absolute;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-o-transform-style:preserve-3d;-ms-transform-style:preserve-3d;transform-style:preserve-3d;-webkit-backface-visibility:hidden;-moz-backface-visibility:hidden;-o-backface-visibility:hidden;-ms-backface-visibility:hidden;backface-visibility:hidden}.sb-side{margin:0;display:block;position:absolute;-moz-backface-visibility:hidden;-webkit-transform-style:preserve-3d;-moz-transform-style:preserve-3d;-o-transform-style:preserve-3d;-ms-transform-style:preserve-3d;transform-style:preserve-3d}.nav-arrows,.nav-arrows a,.nav-dots{z-index:11!important}.nav-arrows a{margin-top:-60px!important;background-color:rgba(0,0,0,.8);margin-left:10px;margin-right:10px}.nav-dots{bottom:0!important;background:rgba(0,0,0,.8);padding:8px}.nav-dots span{background:#777}.nav-dots span:hover{background:#aaa}.slider_button{position:relative;display:inline-block;line-height:1;width:auto;padding:10px 16px;background:#1F1E1E;border-radius:5px;color:#fff;text-decoration:none;margin:12px 0 0;font-size:16px}.slider_button:hover{background:#333}#media (max-width:1170px){.sb-description{width:85%!important;min-width:auto!important;margin:0 60px;box-sizing:border-box}}#media (max-width:850px){.sb-description{width:80%!important;min-width:auto!important;margin:0 60px;box-sizing:border-box}.sb-description h2,.sb-description h3{line-height:1.1;margin:4px 0;padding:4px 0}.sb-description h2{font-size:28px}.sb-description h3{font-size:14px}}#media (max-width:650px){.sb-description{width:75%!important;min-width:auto!important;margin:0 60px;box-sizing:border-box}}#media (max-width:600px){.hide_in_mobile{display:none}}
<div class="logo"><img src="/imageserver/UserMedia/zakattack/Logo.png" /></div>
<div class="mobile_logo"><img src="/imageserver/UserMedia/zakattack/mobile.png" alt="Logo" /></div>
<div class="powered_by">Powered by <img src="/imageserver/UserMedia/ywpgallery/ywpLogo.png" style="max-height:25px;vertical-align:middle;" alt="Your Web Pro | Roofing and Contractor Websites" title="On-Line Showrooms for Roofers & Contractors"></div>
The problem with your version of the regex is that it is greedy, which means .* consumes all characters until the end of the line and performs a backtracking then. That's why in your broken part (the long yellow line) the expression matches everything between 'imageserver' and the last 'png'.
A slight modification can make your regex non-greedy; just add a ? after the quantifier. Then the new regex will also search for a preceding 'imageserver' but it directly checks for each following character if a 'png' sequence is following. So, it only consumes and matches the text until the first 'png' sequence.
The example with the new regex (?<=imageserver).*?(?=png) and your text can be found here: https://regex101.com/r/FvSwg4/1
It is also a good idea to have a look at the regex-debugger view for the example. Then one can better understand the single steps that have to be performed for the matching.
Related
I have big css file and need regex(Notepad++) to get only elements and css selectors found by specific css value. In following example I need to get element and selector by value 123456
header #objectnav nav a {
border-right: solid 1px #c0c0c0;
border-left: solid 1px #f4f9ff;
color: #123456;
}
a:hover {
color: #654321;
}
#hints .hint {
background-color: #f4f9ff;
border: 1px solid #e0f0ff;
color: #123456;
margin: 0 0 30px 0;
position: relative;
}
on exit I expect following
header #objectnav nav a
color
#hints .hint
color
or, if possible
header #objectnav nav a^color
#hints .hint^color
I did this just for the challenge:
The following regex will find all the rules containing the text 123456 as a value:
[^{}\s][^{}]*\{[^}]*?[-\w]+\s*:[^;}]*?123456[^}]*\}
But that's just a basic regex. The more challenging part is that I wondered if it's possible to generate a report such as the one you asked for using nothing but Notepad++. It turns out it's possible.
Replace the following pattern:
\s*([^{}]+?)\s*\{[^}]*?(?(?=([-\w]+)\s*:[^;}]*?123456)[^}]*|[^}])*\}\s*
With the following replacement string:
(?2$1^$2:)
Or this one depending on the output you prefer:
(?2$1\r\n$2\r\n\r\n:)
I didn't test it extensively but it works for the test cases you provided.
<Placemark id="051314">
<name>HI Hostel</name>
<description><![CDATA[<div style="color: #404040;font-size: 12px"><a "#book"style="color:#295181;font-size: 12px" target="_top" href="http://www.hihostels.com/dba/hostel051314.de.htm?himap=Y#book" >Girona - Equity Point Girona</a><img style="margin: 5px 0px 5px 0px; border-color:#909090; padding:2px; display:block; clear:both;" src="http://www.hihostels.com/pics/ES/051314_pic_main.jpeg" width="96" height="72" border="1">Plaça Catalunya, 23<br>Girona<br>17002<br><b>Spanien</b><br><div style="margin-top:3px;"><img style="vertical-align:middle;margin-right:5px;" src="http://www.hihostels.com/imgfront/pegsmall.png" /><a style="color:#295181;font-size: 12px;" href="http://www.hihostels.com/openSVwindow(41.981658,2.823057)">Street View</a></div></div> ]]></description>
My source files look like the one above (basically coming from http://www.hihostels.com/mapcoord/ES.en.kml). I want to replace the (useless) name tag "HI Hostel" (always the same for every placemark) with the hostels real name. The real name appears in the description tag one line below, in the case above it would be "Girona - Equity Point Girona".
Any clever idea on how to do this? Thanks for reading.
Some like this? Using awk
awk -F, '/^<name>/ {next} /^<description/ {s=$0;gsub(/<[^>]*>/, ",");$0="<name>" $4 "</name>\n" s} 1' file
<Placemark id="051314">
<name>Girona - Equity Point Girona</name>
<description><![CDATA[<div style="color: #404040;font-size: 12px"><a "#book"style="color:#295181;font-size: 12px" target="_top" href="http://www.hihostels.com/dba/hostel051314.de.htm?himap=Y#book" >Girona - Equity Point Girona</a><img style="margin: 5px 0px 5px 0px; border-color:#909090; padding:2px; display:block; clear:both;" src="http://www.hihostels.com/pics/ES/051314_pic_main.jpeg" width="96" height="72" border="1">Plaça Catalunya, 23<br>Girona<br>17002<br><b>Spanien</b><br><div style="margin-top:3px;"><img style="vertical-align:middle;margin-right:5px;" src="http://www.hihostels.com/imgfront/pegsmall.png" /><a style="color:#295181;font-size: 12px;" href="http://www.hihostels.com/openSVwindow(41.981658,2.823057)">Street View</a></div></div> ]]></description>
This may also work:
awk -F"<|>" '/^<name>/ {next} /^<description/ {$0="<name>" $8 "</name>\n" $0} 1' file
Ok.. So I've checked (to the best of my abilities) in the issue list, but haven't found anything similar.. If there is an answer out there, apologies about adding a duplicate...
I am using the Foundation 4 framework, with the latest version.
I have bullets (UL mostly) at a lot of places. However, When I use text-align: center for any text with a bulleted list, the normal text and the list text is center aligned, but the bullets themselves (square, disc and so on) are not.
Now the weird part.... this issue occurs only in Chrome and IE9/IE10. It works as intended on Firefox / Safari. I've also tried using the .text-center class (part of foundation.css) which essentially does the same thing i.e., text-align: center.
Here's the test link http://www.crevolve.com/testing/ ....
Any help is much appreciated... Thank you...
I have bullets (UL mostly) at a lot of places. However, When I use
text-align: center for any text with a bulleted list, the normal text
and the list text is center aligned, but the bullets themselves
(square, disc and so on) are not.
You need to set the list-style-position of your ul, that by default has a value of outside. It means that the bullets will be outside the content flow (read more about it here).
To solve your issue you can do this:
ul.square {
list-style-position: inside;
list-style-type: square;
text-align:center;
}
But hang on that will NOT totally solve your issue, I think, because if you have different length of texts in your ul then everything will be centered. That means they will not be aligned and it will not look good. Look at the first slide on this fiddle to see what I mean.
To have it centered and make it look good you can do the following:
.container {
float:right;
position:relative;
right:50%;
background-color:lightgreen;
}
.inner-container {
float:left;
position:relative;
left:50%;
background-color:lightyellow;
}
ul.square {
list-style-type: square;
width:300px;
}
<div> /* the wrapper div */
<div class="container"> /* outer container to offset by 50% */
<div class="inner-container"> /* inner container to make it center */
<ul class="square">
<li>First Item</li>
<li>Second Item, this is a longer text</li>
</ul>
</div>
</div>
</div>
The working sample is on slide 2 of the sampled jsfiddle. I included a background color so you can better see how it works.
If you want to keep the display of list-style-position: outside, while being able to center you bullet and list content on Chrome:
ul {
list-style-position: inside;
}
ul {
padding-left: 11px;
text-indent: -11px;
}
li {
margin-left: -11px;
}
Downside: 11px is the width of the space bewteen the begining of the bullet and the begining of the text of your li. It's an ugly magic number, that may vary from one browser to another. Il haven't found any way to rationalize it, unfortunately...
I am using CKeditor in my application.When i save content of the CKEditor output is added with tags like this.
<B>Summary:</B>
<P><BR><SPAN style="TEXT-ALIGN: left; WIDOWS: 2; TEXT-TRANSFORM: none; BACKGROUND-COLOR: rgb(255,255,255); TEXT-INDENT: 0px; LETTER-SPACING: normal; DISPLAY: inline !important; FONT: 15px/20px Helvetica, Arial, sans-serif; WHITE-SPACE: normal; ORPHANS: 2; FLOAT: none; COLOR: rgb(0,0,0); WORD-SPACING: 0px; -webkit-text-size-adjust: auto; -webkit-text-stroke-width: 0px">The company's latest tweet simply states that "our team continues to investigate, but at this time, we're still unable to confirm that any security breach has occurred. Stay tuned here."</SPAN></P><BR>
<P><BR>Facebook : http://www.facebook.com</P><BR>
How Can I remove all the "break" tags out of above sample using regular exression in javascript.
Upon Save Text should be appended to "Summary : " like here
Summary: Call back the department if you have not heard from them.The initial story was triggered after a user in a Russian forum
claimed that he hacked and uploaded almost 6.5 millionThe initial
story was triggered after a user in a Russian forum claimed that he
hacked and uploaded almost 6.5 million
But now it's coming like this
Summary:
The initial story was triggered after a user in a Russian forum
claimed that he hacked and uploaded almost 6.5 millionThe initial
story was triggered after a user in a Russian forum claimed that he
hacked and uploaded almost 6.5 million
I am using replace(/[\n\r\f]/g, ' ') ;
replace(/\<!>[\s\S]*?\<!>/ig, '')
but no use.help me.
Finally
CKEDITOR.instances.editor1.getData().replace(/(\r\n|\n|\r)/gm,"");
worked perfectly for my issue.
Thanks.
replace(/[\n\r\f]/g, ' ') ;
will remove actual newlines not the coded ones
try
replace(/<BR>/g, '') ;
or if you want to remove all tags
replace(/<[^>]*?>/g, ' ') ;
I’m trying to create a simple menu where I’ve got four menu items each have an image and then there is a special image for each item that is active.
I’m using Drupal so the HTML output can’t be changed (not easy anyway) so my question is if and how it can be done by using the HTML code provided below:
<div id="quicktabs-2" class="quicktabs_wrapper quicktabs-style-nostyle quicktabs-processed">
<ul class="quicktabs_tabs quicktabs-style-nostyle">
<li class="qtab-0 active first">Question</li>
<li class="qtab-1">Lead</li>
<li class="qtab-2">Board</li>
<li class="qtab-3 last">Ready</li>
</ul>
</div>
I have created some that come close to my final wished result but I’m still having trouble with example to indent the text so it is not showed.
Here is my CSS so far:
ul.quicktabs_tabs li {display:inline; }
#quicktabs-2 li.active a {
background-image:url(question-active.png);
background-position:5px 0px;
background-repeat:no-repeat no-repeat;
padding-bottom:18px;
padding-left:135px;
padding-right:5px;
}
#quicktabs-2 li.qtab-1 a {
background-image:url(lead-grey.png);
background-position:5px 0px;
background-repeat:no-repeat no-repeat;
padding-bottom:18px;
padding-left:29px;
padding-right:50px;
}
#quicktabs-2 li.qtab-2 a {
background-image:url(board.png);
background-position:5px 0px;
background-repeat:no-repeat no-repeat;
padding-bottom:18px;
padding-left:29px;
padding-right:50px;
}
#quicktabs-2 li.qtab-3 a {
background-image:url(ready-grey.png);
background-position:5px 0px;
background-repeat:no-repeat no-repeat;
padding-bottom:18px;
padding-left:29px;
padding-right:50px;
}
This is my code so far and it shows my images correctly with the right spacing between them but the text within the a-href I just can’t get hidden.
I’m fairly certain that it is just a question of hitting the right style-class / id but I’ve tried a lot of different combination and I just can’t get it to work.
Any help would be very much appreciated.
Thank you
Sincere
- Mestika
If you want to hide your text within your anchor tag simply add {text-indent:-9999px} this will move your text to -9999px but will hide your text. This method is called IR - Image Replacement
Edit: Here is a Reference provided by #Faust
It sounds like your main concern is to replace the text in the link (no?).
If you have the access to alter the link text, and you're allowed to include markup with those values that does not get HTML-character encoded,
Then by surrounding each link text with spans ( e.g: Question --> <span>Question</span>), so that each line looks like:
<li class="qtab-0 active first"><span>Question<span></li>
...then you can hide the text with this CSS:
#quicktabs-2 a span {display:none;}
Otherwise, I think your only other recourse is to make the text extremely small and close to the color of the images:
#quicktabs-2 a {font-size:1px;text-decoration:none;color:grey}