Comma is used as the delimiter in typer.js. I am trying to use the ascii code of , for a comma but to no avail.. A blank space appears.
Codepen: https://codepen.io/straversi/pen/yrLvmw
<h1>
It was <span
class="typer"
id="some-id"
data-words="dark,,stormy,,night,"
data-delay="100"
data-colors="#08605F,#177E89,purple">
</span>
<span style="font-size:1.2em;vertical-align:middle;" class="cursor" data-cursorDisplay="|" data-owner="some-id"></span>
</h1>
<button class="typer-stop" data-owner="some-id">Stop</button>
<button class="typer-start" data-owner="some-id">Start</button>
This will print a comma.. you need to encode it :)
<h1>
It was <span
class="typer"
id="some-id"
data-words=",.,dark.,stormy.,night."
data-delay="100"
data-colors="#08605F,#177E89,purple">
</span>
<span style="font-size:1.2em;vertical-align:middle;" class="cursor" data-cursorDisplay="|" data-owner="some-id"></span>
</h1>
<button class="typer-stop" data-owner="some-id">Stop</button>
<button class="typer-start" data-owner="some-id">Start</button>
A comma encoded: ,
Some common symbols as encoded: HTML Entities
Read this: Is it possible to print a HTML entity in JS or PHP?
Let me know how you get on!
Related
I want to access the environment properties:
<h1 th:text="${#environment.getProperty('site.name1')}">
<span th:text="${#environment.getProperty('site.name2')}"></span>
</h1>
but I don't get anything for site.name2 even it exists in application.property file
here my application.properties file:
spring.h2.console.enabled=true
spring.h2.console.path=/h2-console
spring.h2.console.settings.trace=false
spring.h2.console.settings.web-allow-others=false
site.name1=plats
site.name2=bruts
spring.messages.encoding=UTF-8
spring.thymeleaf.encoding=UTF-8
spring.servlet.multipart.max-file-size=1000MB
spring.servlet.multipart.max-request-size=1000MB
spring.servlet.multipart.enabled=true
server.port=8080
This is how it looks using:
<h1>Plats
<span class="muellerhoff">Bruts</span>
</h1>
and with:
<h1>
<span th:text="${#environment.getProperty('site.name1')}"></span>
<br/>
<span class="muellerhoff" th:text="${#environment.getProperty('site.name2')}"></span>
</h1>
The end goal is HTML as follows:
<h1>Plats
<span class="muellerhoff">Bruts</span>
</h1>
You can use <th:block> in this case, to handle the name1 value. The block tag will not appear in the final HTML.
<h1>
<th:block th:text="${#environment.getProperty('site.name1')}"></th:block>
<span class="muellerhoff" th:text="${#environment.getProperty('site.name2')}"></span>
</h1>
More info about the th:block tag can be found here.
Here my problem.
<span class="col-sm-3 col-md-3" ng-bind-template="{{controller.getToolTip()}}">
<span class="icon " ng-class="controller.getIcone()" aria-hidden="true"></span>
</span>
In my controller, getToolTip() returns a string and same for getIcone().
The second span is never displayed and not present in the DOM.
But if i replace by this :
<span class="col-sm-3 col-md-3" >
{{controller.getToolTip()}}
<span class="icon " ng-class="controller.getIcone()" aria-hidden="true"></span>
</span>
This time i can see my second span. Do you have an idea what is the problem
ng-bind-template directive replaces the element's content with the interpolation of the template in the ngBindTemplate attribute.
Read more here: https://docs.angularjs.org/api/ng/directive/ngBindTemplate
There is also a syntax error in the sample template. Quotes don't close and curly braces are needed in that case, like this:
<span class="col-sm-3 col-md-3" ng-bind-template="{{controller.getToolTip()}}">
How do I get the value of all the tags that have class="no-wrap text-right circulating-supply"? What I used was:
text=[ ]
text=(soup.find_all(class_="no-wrap text-right circulating-supply"))
Output of text[0]:
'\n\n17,210,662\nBTC\n'
I just want to extract the numeric value.
Example of one instance:
<td class="no-wrap text-right circulating-supply" data-sort="17210662.0">
<span data-supply="17210662.0">
<span data-supply-container="">
17,210,662
</span>
<span class="hidden-xs">
BTC
</span>
</span>
</td>
Thanks.
In case all elements have similar HTML structure try below to get required output:
texts = [node.text.strip().split('\n')[0] for node in soup.find_all(class_="no-wrap text-right circulating-supply")]
This might look like an overkill , You could use use regex to extract numbers
from bs4 import BeautifulSoup
html = """<td class="no-wrap text-right circulating-supply" data-sort="17210662.0">
<span data-supply="17210662.0">
<span data-supply-container="">
17,210,662
</span>
<span class="hidden-xs">
BTC
</span>
</span>
</td>"""
import re
soup = BeautifulSoup(html,'html.parser')
coin_value = [re.findall('(\d+)', node.text.replace(',','')) for node in soup.find_all(class_="no-wrap text-right circulating-supply")]
print coin_value
prints
[[u'17210662']]
I am trying to swap the Follow/Following button depending on whether or not the currentuser is following the other individual. In my code I have and NgIF set up and the thing i am having difficulty with is checking for the value in the array. If just one users name is in the the code works for that user. However if the array has multiple indexes the code turns the value to false.
HTML:
<div *ngFor="let pic of pics">
<span *ngIf="pic.user!=current">
<span *ngIf="pic.user!=cFollows">
<button ion-button>Follow</button>
</span>
<span *ngIf="pic.user==cFollows">
<button ion-button>Following</button>
</span>
My TS File(all of the data in pics is in JSON:
pics = []
cFollows = ["user1","user2"]
So basically if the string value of pic.user is equal to any string in the array show the following button. If it is not show the follow button.
So i figured out i need to change the code to match below
<span *ngIf="pic.user!=current">
<span *ngIf="cFollows.indexOf(pic.user)==-1">
<button ion-button>Follow</button>
</span>
<span *ngIf="cFollows.indexOf(pic.user)!=-1">
<button ion-button>Following</button>
</span>
</span>
I want to add a NewClass value to the class attribute and modify the text of the span using find/replace functionality with a pair of regular expressions.
<div>
<span class='customer' id='phone$0'>Home</span>
<br/>
<span class='customer' id='phone$1'>Business</span>
<br/>
<span class='customer' id='phone$2'>Mobile</span>
</div>
I am trying to get the following result using after search/replace:
<span class='customer NewClass' id='phone$1'>Organization</span>
Also curious to know if a single find/replace operation can been used for both tasks?
Regex can do this, but be aware the using regex to change HTML can have a lot of edge cases that you may not have accounted for.
This regex101 example shows those three <span> elements changed to add NewClass and the contents to be changed to Organization.
Other technologies, however, would be safer. jQuery, for example, could replace them regardless of the order of the attributes:
$("span#phone$1").addClass("NewClass");
$("span#phone$1").text("Organization");
So just be careful with it, and you should be fine.
EDIT
According to comments on the OP, you want to only change the span containing ID phone$1, so the regex101 link has been updated to reflect this.
EDIT 2
Permalink was too long to fit into a comment, so adding the permalink here. Click on the "Content" tab at the bottom to see the replacement.
You can use a regex like this:
'.*?' id='phone\$1'>.*?<
With substitution string:
'customer' id='phone\$1'>Organization<
Working demo
Php code
$re = "/'.*?' id='phone\\$1'>.*?</";
$str = "<div>\n <span class='customer' id='phone\$0'>Home</span>\n<br/>\n <span class='customer' id='phone\$1'>Business</span>\n<br/>\n <span class='customer' id='phone\$2'>Mobile</span>\n</div>";
$subst = "'customerNewClass' id='phone\$1'>Organization<";
$result = preg_replace($re, $subst, $str);
Result
<div>
<span class='customer' id='phone$0'>Home</span>
<br/>
<span class='customerNewClass' id='phone$1'>Organization</span>
<br/>
<span class='customer' id='phone$2'>Mobile</span>
</div>
Since your tags include preg_match and preg_replace, I think you are using PHP.
Regex is generally not a good idea to manipulate HTML or XML. See RegEx match open tags except XHTML self-contained tags SO post.
In PHP, you can use DOMDocument and DOMXPath with //span[#id="phone$1"] xpath (get all span tags with id attribute vlaue equal to phone$1):
$html =<<<DATA
<div>
<span class='customer' id='phone$0'>Home</span>
<br/>
<span class='customer' id='phone$1'>Business</span>
<br/>
<span class='customer' id='phone$2'>Mobile</span>
</div>
DATA;
$dom = new DOMDocument('1.0', 'UTF-8');
$dom->loadHTML($html, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
$xp = new DOMXPath($dom);
$sps = $xp->query('//span[#id="phone$1"]');
foreach ($sps as $sp) {
$sp->setAttribute('class', $sp->getAttribute('class') . ' NewClass');
$sp->nodeValue = 'Organization';
}
echo $dom->saveHTML();
See IDEONE demo
Result:
<div>
<span class="customer" id="phone$0">Home</span>
<br>
<span class="customer NewClass" id="phone$1">Organization</span>
<br>
<span class="customer" id="phone$2">Mobile</span>
</div>