Format HTML in Scriban - sitecore

using scriban with SXA we notice the generated HTML has a lot of white spaces ex :
<div id=”dv1”>
<div id=”dv2”>
This is because in scriban we have if condition before rendering the div with id=de2 , is there a way to format the html ?

It would be helpful if you posted the Scriban snippet you are using. I suspect you need to use ~ operator at the end of your if code block as described here
For example:
<div 1>
{{- #eat all whitespace to left including newlines
if true
#eat whitespace but not newlines to right ~}}
<div 2>
{{end}}
outputs
<div 1>
<div 2>
You can use this tool to experiment with formatting.

Related

How do I conditionally add a space in a regex replace

When I woke up this morning, I didn’t know a stroke of regex. By the time I went to Mass, I’d been able to cobble together this regex to find occurrences of ‘Mph’ in an html document.
(?i)(?<=[\s|\d])mph+
If I run it against the following test data:
<div class="vsMph">
<p>95 Mph</p>
</div>
<div class="vsMph">
<p>95Mph</p>
</div>
It correctly matches:
‘ Mph’ and
‘Mph’
And equally correctly leaves the ‘vsMph’ alone, which is exactly what I want. Eventually, I'm going to use the same technique to match knots, ft, in, km and so on.
I’m executing this expression in in Sublime Text 3 using RegReplace and ultimately, what I hope to do is to use this regular expression to find all occurrences of ‘Mph’ preceded by a space or a digit and:
Enclose ‘Mph’ in <abbr> tags.
Add a space between the digit and the
opening <abbr> tag if there was no space between the last digit and
'Mph' originally.
In other words, I want to convert the above test data to:
<div class="vsMph">
<p>95 <abbr title="Miles per hour">Mph</abbr></p>
</div>
<div class="vsMph">
<p>95 <abbr title="Miles per hour">Mph</abbr></p>
</div>
I can get RegReplace to add the <abbr> tags as described in 1. above, but I’ve searched around on Google and I can’t find anything that tells me how to conditionally insert a space in a regex replace.
So I’m wondering. Is it possible in the first place to conditionally add a space in a regex replacement and if so how do I do it, or do I have to search for ‘\sMph’ and ‘\dMph’ and replace them separately?
Regards.
I would suggest using groups to match Mph. You could search for simply the following regex:
(\d)(\s)?(Mph)
Then replace using groups
$1 <abbr title="Miles per hour">$3</abbr>
output:
<div class="vsMph">
<p>95 <abbr title="Miles per hour">Mph</abbr></p>
</div>
<div class="vsMph">
<p>95 <abbr title="Miles per hour">Mph</abbr></p>
</div>

Search and Replace with Regular Expression

I have the following HTML snippet and there's a bunch more divs on the page.
I'd like to surround all labels (Name, Current Position and Birth Place in this case) with strong tags. I can't use css in this case.
So I was thinking would a regular expression work in this case? More specifically, I'd like to use Visual Studio Search and Replace with Regular Expressions option to do this. So find all data to left of colon and replace value with <strong>value found</strong>
<div class="col-6">
Name:<br/>blah
</div>
<div class="col-6">
Current Position:<br/>blah
</div>
<div class="col-6">
Birth Place:<br/>blah
</div>
In the search tool, just find this:
([a-z ])+:
and replace with this:
<strong>$1</strong>:
Note: the VS search & replace is not case-sensitive by default
You then want to search for a beginning of the line (^) followed by white space (\s*) then some non-line break and non-colon ([^:\n]) followed by a colon and surround the second capture group with the <strong> tag.
Search:
^(\s*)([^:\n]+:)
Replace:
\1<strong>\2</strong>
See this fiddle for more details: http://regex101.com/r/xB8tD5/2

Regex find and replace between <div class="customclass"> and </div> tag

I cant find anywhere a working regex expression to find and replace the text between the div tags
So there is this html where i want to select everything between the <div class="info"> and </div> tag and replace it with some other texts
<div class="extraUserInfo">
<p>Hello World! This is a sample text</p>
<javascript>.......blah blah blah etc etc
</div>
and replace it with
My custom text with some codes
<tags> asdasd asdasdasdasdasd</tags>
so it would look like
<div class="extraUserInfo">
My custom text with some codes
<tags> asdasd asdasdasdasdasd</tags>
</div>
here is a refiddle that all my code is there and as you can see I want to replace the whole bunch of codes between the and tag
http://refiddle.com/1h6j
Hope you get what I mean :)
If there's no nesting, would just do a plain match non-greedy (lazy)
(?s)<div class="extraUserInfo">.*?</div>
.*? matches any amount of any character (as few as possible) to meet </div>
Used s modifier for making the dot match newlines too.
Edit: Here a Javascript-version without s modifier
/<div class="extraUserInfo">[\s\S]*?<\/div>/g
And replace with new content:
<div class="extraUserInfo">My custom...</div>
See example at regex101; Regex FAQ

Regex find CamelCase strings and dashes, replace with lowercase_underscored

In PHPStorm, I need to find/replace some mixed case strings which are used for CSS class names and for the DOM id's. I can't change attributes like onClick and image names need to remain. Here is what I have:
<div class="ThumbContainer" id="Source-Data4-Thumb">
<div class="ThumbTitleArea">
<div class="DataTitleDiv"> GYR Performance <img src="images/someImage.png" onClick="someFunc()" /></div>
</div>
<div class="dataDetailArea">
<div class="DataThumbArea"> Data Source:Client<br>
Last refreshed:12/05/2013 <br>
Records:206<br>
<br>
Used for the following reports<br>
- GYR Performance<br>
</div>
</div>
</div>
Here is what I need:
<div class="thumb_container" id="source_data4_thumb">
<div class="thumb_title_area">
<div class="data_title_div"> GYR Performance <img src="images/someImage.png" onClick="someFunc()" /></div>
</div>
<div class="data_detail_area">
<div class="data_thumb_area"> Data Source:Client<br>
Last refreshed:12/05/2013 <br>
Records:206<br>
<br>
Used for the following reports<br>
- GYR Performance<br>
</div>
</div>
</div>
Notice the dataDetailArea starts with a lowercase.. bleh. This will be a one-time find/replace so it doesn't need to be in PHPStorm. It can be in any online tool even, like http://gskinner.com/RegExr/
The actual backbone template I need to find/replace on is about 3100 lines of code, otherwise I'd provide it all here for you.
Here's what I have so far. It seems to not match match the Camel-Case3-Foo:
(class|id|data-[?!=])="\b([A-Za-z][a-z-]*){2,}\b"
This regex should find the locations where underscores should be placed:
((?<=\w)(?=[A-Z])|-)
It would seem to make sense to do a replacement with this to insert the underscores, then convert the string to lower case.
I would search for something like this:
"[a-z0-9_]*\([A-Z]\)
A quote mark with anything following that has lowercase, numeric, or underscore characters.
Anything following that has an uppercase letter.
Make the uppercase letter sub-expression 1.
Replace subexpression 1 with an underscore + the result from a tolower() function.
You will need to apply this multiple times to each line since it will only find one
uppercase letter per pass.

Regex HTML nested quotes replacement

I have multi nested quotes in an HTML that look like this:
<div class="quote-container">
<div class="quote-block">
<div class="quote-container">
<div class="quote-block">
</div>
</div>
<div class="quote-container">
<div class="quote-block">
</div>
</div>
<div class="quote-container">
<div class="quote-block">
</div>
</div>
</div>
</div>
I need to search and remove quotes. I use expression:
<div class="quote-container">.*<div class="quote-block">.*</div>.*</div>
This works for single quotes. However there is a problem with multi nested quotes (example above).
My task is to search for:
<div class="quote-container">.*<div class="quote-block">
plus any string NOT containing
<div
and ending with
.*</div>.*</div>
I tried lookbehind and lookahead assertions like this:
<div class="quote-container">.*<div class="quote-block">.*(?!<div).*</div>.*</div>
but they don't work.
Is there a way to do my task? I need a perl expression I can use in TextPipe (I use it for forum parsing and later I do text-to-speech conversion).
Thanks in advance.
I think your problem is you are using greedy expressions .*.
Try replacing all .* with the non-greedy .*?
I would personally solve this problem by replacing the quotes out until there were no longer any quotes to replace out. There's really no way to handle this in one regex replace, what you'll need to do is something like:
psuedo-code:
html="... from your post ...";
do{
newhtml=html
newhtml=replace(
'/<div class="quote-container">.*<div class="quote-block">.*</div>.*</div>/s',
'',
newhtml
)
} while(newhtml!=html)
html=newhtml
this will handle all manner of nested quotes.
Regexes are a poor choice to manipulate nested structures. I would write a specific parser for this problem (a simple stack based parser should suffice).