In my smarty template I got color-codes from my DB like this:
c#m#fc#fm#
Now I want to replace each color-code with a html tag.
c# => <i class='fas fa-circle cyan'></i>
m# => <i class='fas fa-circle magenta'></i>
fc# => <i class='fas fa-circle lightmagenta'></i>
fm# => <i class='fas fa-circle lightcyan'></i>
I tried it this way:
[{$oAttr->oxattribute__oxvalue->value|replace:"c#":"<i class='fas fa-circle cyan'></i>"|replace:"m#":"<i class='fas fa-circle magenta'></i>"|replace:"fc#":"<i class='fas fa-circle fcyan'></i>"|replace:"fm#":"<i class='fas fa-circle fmagenta'></i>"}]
The problem is that replace:"c#":"<i class='fas fa-circle cyan'></i> also replace the c# in fc#. So the f is leftover.
What would be the best solution? I think regex_replace would work but Im a completely regex beginner. Someone might have some useful tips or solutions?
Greetings
Related
FontAwesome: 4.7 (newest version)
Foundation 6.4.2 (newest version)
Whenever I put two or more FontAwesome icons next to each other horizontally, they are not vertically aligned. I've tried various vertical-align CSS styles and cannot get it to work. Please help!
Screenshot:
Code:
<div class="row callout">
<div class="small-2 columns">
<i class="fa fa-2x fa-sort-asc"></i>
<i class="fa fa-2x fa-sort-desc"></i>
</div>
<!-- another div with more columns here, totaling 12 -->
You should use a:{display: inline;}
Interestingly, this example has nothing really to do with Foundation, but everything to do with FontAwesome. The particular icons you've chosen happen to only take up part of the space of the font, and be placed at the top and bottom of the line. Full height icons line up just fine. You can see this illustrated in this code example (linked in this pen: https://codepen.io/kball/pen/mMNyrZ) where I add 2 full-height icons to the 2 half-height icons from your example.
<i class="fa fa-2x fa-sort-asc"></i>
<i class="fa fa-2x fa-sort-desc"></i>
<i class="fa fa-2x fa-snowflake-o"></i>
<i class="fa fa-2x fa-soccer-ball-o"></i>
So, VS Community 2017 offer me to download Glyphfriend.
I installed it, but it's not displaying the icons.
I'm importing all the libraries as usual, like this
bundles.Add(new ScriptBundle("~/bundles/jquery").Include(
"~/Scripts/jquery-{version}.js"));
bundles.Add(new ScriptBundle("~/bundles/bootstrap").Include(
"~/Scripts/bootstrap.js",
"~/Scripts/respond.js"));
bundles.Add(new StyleBundle("~/Content/css").Include(
"~/Content/bootstrap.min.css",
"~/Content/Site.css"));
I tried also importing all the libraries above directly in the page, but didn't solve the problem.
I'm doing this to display the icons
<ul class="icons-list">
<li class="dropdown">
<span class="fa-cog"></span> <span class="caret"></span>
<ul class="dropdown-menu dropdown-menu-right">
//Tried using span as well
<li><span class="mdi-sync"></span> Update data</li>
<li><i class="octicon-list-unordered"></i> Detailed log</li>
<li><i class="glyphicon-check"></i> Statistics</li>
<li><i class="icon-cross"></i> Clear list</li>
</ul>
</li>
</ul>
None of then worked. It works only If I don't use GlyphFriend
<span class="glyphicon glyphicon-adjust"></span>
Any ideas?
I would like to get
PA-1400-11PA ADP-40PH ABA
Here html code
</div>
<div class="ref">
<h2 id='affiche_sous_titre'>eee :</h2> <p>
<a href='eee' title='PA-1400-11PA' class='lien_menu'>PA-1400-11PA</a> - <a href='uuu' title='ADP-40PH ABA' class='lien_menu'>ADP-40PH ABA</a> </p>
</div>
<div class="modele_tout">
</div>
<div class="star-customer">
Here my reg code
line=line.replace(/[\"\']lien_menu[\"\']>(.*?)<\/a>/ig,"$1\n")
But I have only
ADP-40PH ABA
What is the problem.I dont understand?
thanks for your help
I would like to remove withe spaces or new lines from a string that comes from a html sentence.
Example: lets take the follow string
<ul class="list-group sidebar-nav-v1 margin-bottom-40" id="menuHomeUserPrivate">
<li class="list-group-item active">
<a id="to_ProfileOverall" class="privateMenuLinkJS"><i class="fa fa-bar-chart-o"></i> Overall</a>
</li>
<li class="list-group-item list-toggle">
<a data-toggle="collapse" data-parent="#menuHomeUserPrivate" href="#collapse-MoneyManage" ><i class="fa fa-money"></i> Invoice</a>
<ul id="collapse-MoneyManage" class="collapse">
<li><a id="to_MoneyManagerFaturamentoInsert" class="privateMenuLinkJS"><i class="fa fa-level-down"></i> Big Invoice </a></li>
<li><a id="to_MoneyManagerFaturamentoGerir" class="privateMenuLinkJS"><i class="fa fa-cogs"></i> Big big big
Invoice 2 </a></li>
</ul>
</li>
</ul>
This is the desired result:
<ul class="list-group sidebar-nav-v1 margin-bottom-40" id="menuHomeUserPrivate"><li class="list-group-item active"><a id="to_ProfileOverall" class="privateMenuLinkJS"><i class="fa fa-bar-chart-o"></i>Overall</a></li><li class="list-group-item list-toggle"><a data-toggle="collapse" data-parent="#menuHomeUserPrivate" href="#collapse-MoneyManage" ><i class="fa fa-money"></i> Invoice</a><ul id="collapse-MoneyManage" class="collapse"><li><a id="to_MoneyManagerFaturamentoInsert" class="privateMenuLinkJS"><i class="fa fa-level-down"></i>Big Invoice</a></li><li><a id="to_MoneyManagerFaturamentoGerir" class="privateMenuLinkJS"><i class="fa fa-cogs"></i>Big big big Invoice 2</a></li></ul></li></ul>
As you can see:
Only 1 line, no withe spaces or new lines between "><" if there is no string between them.
I would like to have trimmed strings between "><" if there are some. Example: </i> Big Invoice </a> became </i>Big Invoice</a>.
And finally
</i> Big big big
Invoice 2 </a></li>
became </i>Big big big Invoice 2</a></li>, no new line in the middle of the sentence and trimmed.
So far I achieved the first step. This is the regex I used (>\s+<) but I don't know how to achieve the step 2 and 3. Is it possible? Any idea?
Update:
After Adam's post, this the final code:
//Put your html code here. Do not use double quotes " inside it. Instead, use single.
$str =<<<eof
your dynamic HTML here.
eof;
$re = "/(?:\\s*([<>])\\s*|(\\s)\\s*)/im";
$subst = "$1$2";
$result = preg_replace($re, $subst, $str);
//If you want to use JSON
$arrToJSON = array(
"dataPHPtoJs"=>"yourData",
"htmlDyn"=>"$result"
);
$resultJSON= json_encode(array($arrToJSON));
This html string is clean. So you can use it trough AJAX, JSON, inside javascript, that will works.
I my case I am using inside a javascript code, no AJAX, no JSON.
var htmlDyn="<?php echo $result; ?>";
//Do what you want to do with.
$('.someElementClass').append(htmlDyn);
Here is the solution:
(?:\s*([<>])\s*|(\s)\s*)
Substitution:
\1\2
You can try it here:
https://regex101.com/r/dL5gB5/1
Some XML conversions if you please?
The following snippet is in PHP but could easily transformed to work with i.e. Python as well.
<?php
$string = <<<EOF
<html>
<ul class="list-group sidebar-nav-v1 margin-bottom-40" id="menuHomeUserPrivate">
<li class="list-group-item active">
<a id="to_ProfileOverall" class="privateMenuLinkJS"><i class="fa fa-bar-chart-o"></i> Overall</a>
</li>
<li class="list-group-item list-toggle">
<a data-toggle="collapse" data-parent="#menuHomeUserPrivate" href="#collapse-MoneyManage" ><i class="fa fa-money"></i> Invoice</a>
<ul id="collapse-MoneyManage" class="collapse">
<li><a id="to_MoneyManagerFaturamentoInsert" class="privateMenuLinkJS"><i class="fa fa-level-down"></i> Big Invoice </a></li>
<li><a id="to_MoneyManagerFaturamentoGerir" class="privateMenuLinkJS"><i class="fa fa-cogs"></i> Big big big
Invoice 2 </a></li>
</ul>
</li>
</ul>
</html>
EOF;
$xml = simplexml_load_string($string);
$dom = new DOMDocument('1.0');
$dom->preserveWhiteSpace = false;
$dom->formatOutput = false;
$dom->loadXML($xml->asXML());
echo $dom->saveXML();
/* output:
<html><ul class="list-group sidebar-nav-v1 margin-bottom-40" id="menuHomeUserPrivate"><li class="list-group-item active"><a id="to_ProfileOverall" class="privateMenuLinkJS"><i class="fa fa-bar-chart-o"/> Overall</a></li><li class="list-group-item list-toggle"><a data-toggle="collapse" data-parent="#menuHomeUserPrivate" href="#collapse-MoneyManage"><i class="fa fa-money"/> Invoice</a><ul id="collapse-MoneyManage" class="collapse"><li><a id="to_MoneyManagerFaturamentoInsert" class="privateMenuLinkJS"><i class="fa fa-level-down"/> Big Invoice </a></li><li><a id="to_MoneyManagerFaturamentoGerir" class="privateMenuLinkJS"><i class="fa fa-cogs"/> Big big big
Invoice 2 </a></li></ul></li></ul></html>
*/
?>
Eliminates all unnecessary whitespace and is safer then using regular expressions on HTML tags.
This will trim the whitespaces adjacent to tags and remove newlines in the middle of content.
Find:
(?:\s*(<(?:(?:/?[\w:]+\s*/?)|(?:[\w:]+\s+(?:(?:(?:"[\S\s]*?")|(?:'[\S\s]*?'))|(?:[^>]*?))+\s*/?)|\?[\S\s]*?\?|(?:!(?:(?:DOCTYPE[\S\s]*?)|(?:\[CDATA\[[\S\s]*?\]\])|(?:--[\S\s]*?--)|(?:ATTLIST[\S\s]*?)|(?:ENTITY[\S\s]*?)|(?:ELEMENT[\S\s]*?))))>)\s*|(?:\r?\n)+)
Replace:
$1
Output:
<ul class="list-group sidebar-nav-v1 margin-bottom-40" id="menuHomeUserPrivate"><li class="list-group-item active"><a id="to_ProfileOverall" class="privateMenuLinkJS"><i class="fa fa-bar-chart-o"></i>Overall</a></li><li class="list-group-item list-toggle"><a data-toggle="collapse" data-parent="#menuHomeUserPrivate" href="#collapse-MoneyManage" ><i class="fa fa-money"></i>Invoice</a><ul id="collapse-MoneyManage" class="collapse"><li><a id="to_MoneyManagerFaturamentoInsert" class="privateMenuLinkJS"><i class="fa fa-level-down"></i>Big Invoice</a></li><li><a id="to_MoneyManagerFaturamentoGerir" class="privateMenuLinkJS"><i class="fa fa-cogs"></i>Big big big Invoice 2</a></li></ul></li></ul>
Benchmark:
Regex1: (?:\s*(<(?:(?:/?[\w:]+\s*/?)|(?:[\w:]+\s+(?:(?:(?:"[\S\s]*?")|(?:'[\S\s]*?'))|(?:[^>]*?))+\s*/?)|\?[\S\s]*?\?|(?:!(?:(?:DOCTYPE[\S\s]*?)|(?:\[CDATA\[[\S\s]*?\]\])|(?:--[\S\s]*?--)|(?:ATTLIST[\S\s]*?)|(?:ENTITY[\S\s]*?)|(?:ELEMENT[\S\s]*?))))>)\s*|(?:\r?\n)+)
Options: < none >
Completed iterations: 50 / 50 ( x 1000 )
Matches found per iteration: 29
Elapsed Time: 6.75 s, 6749.58 ms, 6749576 µs
I'm using react_component in my Rails project. This inserts a wrapping div for the react.js component, e.g.
<div data-react-class="ButtonSwitchToTab" data-react-props="{...}">
<a href="#" class="btn btn-primary btn-lg" ... data-reactid=".2">
Add / Invite People
</a>
</div>
What I really need is to insert style information into this wrapping div so that components align appropriately, like so:
<div data-react-class="ButtonSwitchToTab" data-react-props="{...}"
style="display:inline-block"> <<<<<------
<a href="#" class="btn btn-primary btn-lg" ... data-reactid=".2">
Add / Invite People
</a>
</div>
What's the appropriate way to do that?
Ah, dove deeper into react_rails doco (Helper's signature) and found that I could add pass-through html_options.
So:
<%= react_component('ButtonSwitchToTab', {prop: .., prop: ..},
{:style => "display:inline-block"}) %>
I needed to style the component mount point as well, and I just assigned a custom ID to my component:
= react_component 'LoginPage', id: 'login-page-container'
(HAML template)