I have this string below. I can capture each curly brace with (\{\{.*?\}\})/igm but I need a way of replacing any instance of ' with " in the below string, with javascript.
{% layout none %}<html data-reactid=".1h8va4op8n4" data-react-checksum="-832592417">
<head lang="en" data-reactid=".1h8va4op8n4.0">
<meta charset="UTF-8" data-reactid=".1h8va4op8n4.0.0">
<title data-reactid=".1h8va4op8n4.0.1"></title>
<link rel="stylesheet" href="{{ 'main.css' | asset_file }}" data-reactid=".1h8va4op8n4.0.2">
</head>
<body data-reactid=".1h8va4op8n4.1">
<div id="main" data-reactid=".1h8va4op8n4.1.0"></div>
<script type="text/javascript" src="{{ 'bundle.js' | asset_file }}" data-reactid=".1h8va4op8n4.1.1"></script>
</body>
</html>
You could do this using a callback function.
var r = s.replace(/{{[^}]*}}/g, function(v) {
return v.replace(/'/g, '"');
});
Related
Here is my main page, localhost:8000/helloworld/greeter at helloworld\templates\hello:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>Hello!</title>
{% load static%}
<link rel="stylesheet" type = "text/css" href = "{% static 'hello/site.css' %}" />
</head>
<body>
<span class="message">Hello there, {{ name }}!</span> It's {{ date | date:'l, d F, Y' }} at {{ date | time:'H:i:s' }}.
</body>
</html>
and here is the CSS file at helloworld\static\hello (so it should look for localhost:8000\helloworld\static\hello\site.css):
.message{
font-weight
color: blue;
}
and here is the file structure:
The expected behaviour would be that the phrase "Hello there, [name]" is bolded and in blue, but here is what the code actually yields: (this is the problem)
And looking within the console gives this error:
GET http://localhost:8000/static/hello/site.css net::ERR_ABORTED 404 (Not Found)
Notice how it seems to think that "static" is at the root directory, when it is in localhost\helloworld.
I would like to find a solution to this problem and change it so that it links to the correct directory
I tried to change the block, specifically:
<link rel="stylesheet" type = "text/css" href = "{% static 'hello/site.css' %}" />
to：
<link rel="stylesheet" type = "text/css" href = "{% 'helloworld/static/hello/site.css' %}" />
I expect that it will apply the site.css but it didn't and threw a TemplateSyntaxError.
The problem is fixed like so:
In the file settings.py, I changed the line to become STATIC_URL = '/helloworld/static/'
How do I create a div for each directory using flask?
I tried this but it does not do anything and theres nothing in the console:
python file:
# Get a list of directories in the 'servers' directory
folders = [d for d in os.listdir('servers/') if os.path.isdir(d)]
# Create a div element for each folder
divs = []
for folder in folders:
div = f"<div class='list'><a href='/servers/{folder}'>{folder}</a></div>"
divs.append(div)
# Join the div elements into a single string
divs_string = "\n".join(divs)
# Render the template and pass the div elements as a variable
return render_template('home.html')
html file (home.html):
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/home.css') }}" />
<link rel="stylesheet" href="https://rawcdn.githack.com/CrystalVortex/Feather-CSS/9318334ceedfa61d6a64349a558ef1e48ef19cb2/Feather1.7.css">
<title>FeatherPanel | Home</title>
</head>
<body>
<form action="/create" method="post">
<button class="btn_blue">Create Server</button>
</form>
{% for directory in directories %}
<div>{{ directory }}</div>
{% endfor %}
</body>
</html>
The listdir function just returns a list of filenames. To test within your loop whether it is a directory, the isdir function expects the path including the folder name.
You can then pass the returned list to the template.
I'm using locals() here to pass all local variables to the template. However, you can also pass the variables individually with a key.
#app.route('/servers/')
def servers():
# Get a list of directories in the 'servers' directory
folders = [d for d in os.listdir('servers') if os.path.isdir(os.path.join('servers', d))]
# Render the template and pass the div elements as a variable
return render_template('home.html', **locals())
Within the template you can iterate over said list to create a "div" element for each entry.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/home.css') }}" />
<link rel="stylesheet" href="https://rawcdn.githack.com/CrystalVortex/Feather-CSS/9318334ceedfa61d6a64349a558ef1e48ef19cb2/Feather1.7.css">
<title>FeatherPanel | Home</title>
</head>
<body>
<form action="/create" method="post">
<button class="btn_blue">Create Server</button>
</form>
{% for folder in folders %}
<div>{{ folder }}</div>
{% endfor %}
</body>
</html>
You didn't describe what should happen when a user clicks a link for a listed directory. Keep in mind that only files in the static folder are accessible from the client. If you want to use an anchor to refer to listed directories outside of the static folder, you need another endpoint.
i dont quite understand how this webpage displays it's data as the source code simply shows it's google tag code.
where does the code for the page layout come from?
http://www.trademe.co.nz/property/insights/address/Auckland/Orakei/Tautari-Street/42/60e6b7b1-d472-4fe2-bab1-7b8a9c18e641
<!DOCTYPE html>
<html>
<head ng-controller="headController as ctrl">
<base href="/">
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0,height=device-height"/>
<meta name="description" content="Search over 1.5 million New Zealand properties and discover free estimated market values, sold prices, rateable valuations and more." />
<meta name="apple-itunes-app" content="app-id=550943614, affiliate-data=1010lc5k"/>
<title>House sold prices & property information | Trade Me Property Insights</title>
<link rel="stylesheet" href="/property/insights/css/app.css?v=Xq_vVMQyeqWVriJqrsx95fOd3kQR4nYrrMxb8sLFsl4" />
<!-- Google Tag Manager TODO add key in iFrame for production-->
<noscript>
<iframe src="//www.googletagmanager.com/ns.html?id=GTM-WP683K>" height="0" width="0" style="display: none; visibility: hidden"></iframe>
</noscript>
<script>
var testRegEx = /test[1-9][a-z]/i;
var containerId = 'GTM-KMC2M2';
if (/test[1-9][a-z]/i.test(window.location.origin)) containerId = 'GTM-WP683K';
if (/.dev.trademe.co.nz/i.test(window.location.origin)) containerId = 'GTM-53CZK6';
(function(w, d, s, l, i) {
w[l] = w[l] || [];
w[l].push(
{ 'gtm.start': new Date().getTime(), event: 'gtm.js' }
);
var f = d.getElementsByTagName(s)[0],
j = d.createElement(s),
dl = l != 'dataLayer' ? '&l=' + l : '';
j.async = true;
j.src =
'//www.googletagmanager.com/gtm.js?id=' + i + dl;
f.parentNode.insertBefore(j, f);
})(window, document, 'script', 'dataLayer', containerId);
</script>
<link href="/property/insights/styles.0f79228bbfea7a89f25f.bundle.css?v=qL0UK5rKQQTni727hQPz_P9WxK7qhDCkpkC3fzJ_Kuk" rel="stylesheet" /></head>
<body>
<input id="HostingEnvironment" name="HostingEnvironment" type="hidden" value="Production" />
<app>
<div class="loading-container">
<img src="/property/insights/images/loader.svg" />
<div class="loading-text">Just a moment...</div>
</div>
</app>
<script type="text/javascript" src="/property/insights/inline.9119e57f92f5676e8860.bundle.js?v=Ef2IUZ--xAfHSZwkaFyNspZ7PkjVfBAh8gQYGNLYbKc"></script><script type="text/javascript" src="/property/insights/polyfills.6292e3ee5e1ea889726b.bundle.js?v=ryy3leF6QDbqOPfS7dyHC0QD_QKX5vjwiNit2pfnyAU"></script><script type="text/javascript" src="/property/insights/vendor.d418eda2f891d23557f3.bundle.js?v=t7foCzMb9MYsSguXz23JEwECvn_9RDoKaJIfSpijuAs"></script><script type="text/javascript" src="/property/insights/main.54e60317a2b1ac8487cb.bundle.js?v=wqYIDaveFz1-mbQA_o01prc5-eoXnyOH9x83fK2gSFw"></script></body>
</html>
There is a bunch of script tags at the end of the page - these are all likely the scripts that load the application - layout and all.
I have two html templates, with index.html extending base.html
base.html is like this:
{{ define "base" }}
<html>
<head>
<meta charget="utf-8">
<title>{{ template "title" . }}</title>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="/js/isotope.pkgd.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="/css/style.css">
</head>
<body>
{{ template "index" . }}
</body>
</html>
{{ end }}
And index.html:
{{ define "title" }}Homepage{{ end }}
{{ define "index" }}
<div class="wrapper">
<div class="page-content">
<div class="container">
<div class="left">
<img src="../public/images/img_landing_page_mac.png">
</div>
<div class="right">
<h2 style="font-size: 33px; letter-spacing: 5px">Organize <br>Modern Knowledge<br> for Mankind</h2>
<p style="font-size: 20px;margin-top: 35px;letter-spacing: 4px">Consume, Colect and Revisit <br>Knowledge at Your Fingertips</p>
<img src="../public/images/btn_get_chrome.png">
</div>
</div>
</div>
</div>
{{ end }}
It should render when requesting path on browser with a callback handler:
func IndexHandler(w http.ResponseWriter,r *http.Request){
files:=[]string{"base","index"}
util.RenderTemplate(w,nil,files...)
}
RenderTemplate is a wrapper function to render
func RenderTemplate(w http.ResponseWriter,data interface{},tmpl... string){
cwd,_:=os.Getwd()
files:=make([]string, len(tmpl))
for i,file:=range tmpl{
files[i]=filepath.Join(cwd,"./view/"+file+".html")
}
t,err:=template.ParseFiles(files...)
if err!=nil{
http.Error(w,err.Error(),http.StatusInternalServerError)
return
}
templates:=template.Must(t,err)
err=templates.Execute(w,data)
if err!=nil {
http.Error(w,err.Error(),http.StatusInternalServerError)
}
}
After I start server, I request that path on browser, but nothing is rendered at all. What am I missing? It seems that no inheritance is comprehended here
I follow this tutorial, trying to render templates with inheritance / extension:
https://elithrar.github.io/article/approximating-html-template-inheritance/
The define action doesn't execute template, only template and block actions do. Most probably you just want to remove define from your base template (first and last lines) and it will work as expected.
Or you can use Template.ExecuteTemplate function instead of Template.Execute. It accepts name of the template:
err = templates.ExecuteTemplate(w, "base", data)
Or if you are using Go1.6 or newer you can try block action instead of define.
On the side note, please, consider using gofmt.
I am new to angularjs and I am using "emoji-min.js" and "emoji-min.css" to display the emoji in text field.
But I am not able to display. Here is my code:
<!doctype>
<html ng-app = "app">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="emoji.min.css">
<script src="angular.min.js"></script>
<script src="emoji.min.js"></script>
<script>
var app = angular.module("app", ["emoji"])
app.controller("AppCtrl", function ($scope) {
$scope.message = "String including Emoji codes :smiley:";
});
</script>
</head>
<body ng-controller="AppCtrl">
<textarea ng-model="message"></textarea>
<p ng-bind-html-unsafe="message | emoji"></p>
<pre>{{ message }}</pre>
</body>
</html>
Please tell where I am going wrong.
For ng-bind-html to work, you need to have ngSanitize module injected in your app.
checkout this