Develop Reference

I have no access to array, but need to remove commas

So this is a slightly obscure one.
I'm using Formidable Forms Pro on Wordpress to make quite a complex form. I use a Dynamic Field (who's selections come from entries from another form, hence dynamic) where users can make multiple selections.
I then use a Dynamic List Field to show the users choices more visually.
That image doesn't look too bad, not the best styling but I'm trying to get the mechanics right before making it look pretty.
The styling is in place because I'm hiding commas put in dynamically by Formidable Forms. Herein lies the issue.
This approach would work fine if I wanted the list to appear one on top of the other, but anticipating that users may want to make 10 or more selections in some cases, the list will start to take up too much of the screen.
Now, there are plenty of examples out there of how to remove delimiters from strings and arrays (I believe this is an array of strings,) but, I have no access to either to make the variable to allow that procedure to happen. Leaving it as it is means I can't use CSS Grid to style the list as my hope is to use the repeat auto-fit method to align them all side by side when there's enough space, as the commas are considered a child of the grid element like the list elements.
Inspecting the code shows that there are no html elements encasing the commas so there's no hope to use Javascript there either to remove commas within a class or whatever.
If it's possible for anyone with the know how to point me in the right direction it would be gratefully appreciated.
Since I'm using Formidable Forms to create the forms, the only code I can retrieve for you really is the output, which is what I have supplied in the images. Not ideal, I know.
The only pre-rendering code I have access to in Formidable is below. Though I suspect this will be of no use to anyone, which is why I didn't post it originally:
<div id="frm_field_[id]_container" class="frm_form_field form-field [required_class][error_class]">
<label for="field_[key]" id="field_[key]_label" class="frm_primary_label">[field_name]
<span class="frm_required">[required_label]</span>
</label>
<div class="frm_opt_container" aria-labelledby="field_[key]_label" role="group">[input]</div>
[if description]<div class="frm_description" id="frm_desc_field_[key]">[description]</div>[/if description]
[if error]<div class="frm_error" id="frm_error_field_[key]">[error]</div>[/if error]
</div>
And the rendered code:
<div id="frm_field_70_container" class="frm_form_field form-field frm_none_container frm_dynamic_data_container">
<label for="field_b0r85" id="field_b0r85_label" class="frm_primary_label">Dynamic
<span class="frm_required"></span>
</label>
<div class="frm_opt_container" aria-labelledby="field_b0r85_label" role="group" style=""><p class="frm_show_it"></p><div class="combined_field_output"><img src="http://3.11.173.147.xip.io/wp-content/uploads/formidable/2/IMG-20190512-WA0005-29-150x150.jpg" alt="Image of exercise 5545" style="width:60px;height:60px"><h3>5545</h3><p>Abdominals</p></div>, <div class="combined_field_output"><img src="http://3.11.173.147.xip.io/wp-content/uploads/formidable/2/IMG-20190512-WA0005-13-150x150.jpg" alt="Image of exercise goo" style="width:60px;height:60px"><h3>goo</h3><p>Abdominals</p></div>, <div class="combined_field_output"><img src="http://3.11.173.147.xip.io/wp-content/uploads/formidable/2/IMG-20190512-WA0005-27-150x150.jpg" alt="Image of exercise should work" style="width:60px;height:60px"><h3>should work</h3><p>Abdominals</p></div>, <div class="combined_field_output"><img src="http://3.11.173.147.xip.io/wp-content/uploads/formidable/2/IMG-20190512-WA0005-14-150x150.jpg" alt="Image of exercise Walking Lunges" style="width:60px;height:60px"><h3>Walking Lunges</h3><p>Abdominals</p></div><p></p>
5545Abdominals, gooAbdominals, should workAbdominals, Walking LungesAbdominals">
Edit: Formidable provide a way to Customise a dynamic link fieldwhich mentions nothing of the delimiter. It is my understanding that if no delimiter is specified, a comma will be added dynamically, which is what I think is happening in here. Can this PHP hook be edited to specify no delimiter be added at all?

I don't know if you have access to javascript post rendering. If you do, you can always use regex to fix your innerHTML
var text = document.getElementsByClassName("frm_opt_container")[0].innerHTML;
var reg = new RegExp("(<div class=\"combined_field_output\">.*</div>[.\n\r]*)(,)");
while(reg.test(text)){
text = text.replace(reg, "$1")
}
document.getElementsByClassName("frm_opt_container")[0].innerHTML = text

Using the `content` attribute as an HTML Template

I've been trying to use the CSS content property to make somewhat of a "template" for an element of a specific class.
I've tried multiple things. . .
Many places I have seen told me to convert everything to hexadecimal, so I did, until I saw that using hex wrote the litteral characters into the element, instead of evaluating the characters as HTML.
I then tried just litterally entering the characters into the content, and I got the exact same result (this makes it appear as if there is no purpose for the hex, yet thats hard to belive with how many people say there is. . . ).
Is there any way that I can place HTML content into an element using the CSS content attribute?
I've made a JS-Fiddle for this:
And, of course, Stack wants my source:
HTML:
<button id="normal" >Show with normal output</button>
<button id="hex" >Show with Hexadecimal output</button>
<div id="class_changer" ></div>
JS:
function changeClass(evt)
{
class_changer.className = evt.srcElement.id;
}
var class_changer = document.getElementById('class_changer');
var normal = document.getElementById('normal').addEventListener('click', changeClass, true);
var hex = document.getElementById('hex').addEventListener('click', changeClass, true);
And the un-godly long CSS:
.normal::before {
content: '<img alt="Facebook" src="http://cache.addthis.com/icons/v1/thumbs/32x32/facebook.png" />';
}
.hex::before {
content: '\0027\003c\0061\0020\0068\0072\0065\0066\003D\0022\0068\0074\0074\0070\003A\002F\002F\0061\0070\0069\002E\0061\0064\0064\0074\0068\0069\0073\002E\0063\006F\006D\002F\006F\0065\0078\0063\0068\0061\006E\0067\0065\002F\0030\002E\0038\002F\0066\006F\0072\0077\0061\0072\0064\002F\0066\0061\0063\0065\0062\006F\006F\006B\002F\006F\0066\0066\0065\0072\003F\0070\0063\006F\003D\0074\0062\0078\0033\0032\006E\006A\002D\0031\002E\0030\0026\0061\006D\0070\003B\0075\0072\006C\003D\0068\0074\0074\0070\0025\0033\0041\0025\0032\0046\0025\0032\0046\0077\0077\0077\002E\0063\0069\006D\0074\0072\0061\006B\002E\0063\006F\006D\0026\0061\006D\0070\003B\0075\0073\0065\0072\006E\0061\006D\0065\003D\0063\0069\006D\0063\006F\0072\0022\0020\0074\0061\0072\0067\0065\0074\003D\0022\005F\0062\006C\0061\006E\006B\0022\003e\003c\0069\006D\0067\0020\0061\006C\0074\003D\0022\0046\0061\0063\0065\0062\006F\006F\006B\0022\0020\0073\0072\0063\003D\0022\0068\0074\0074\0070\003A\002F\002F\0063\0061\0063\0068\0065\002E\0061\0064\0064\0074\0068\0069\0073\002E\0063\006F\006D\002F\0069\0063\006F\006E\0073\002F\0076\0031\002F\0074\0068\0075\006D\0062\0073\002F\0033\0032\0078\0033\0032\002F\0066\0061\0063\0065\0062\006F\006F\006B\002E\0070\006E\0067\0022\0020\002F\003e\003c\002F\0061\003e';
}
Check it out at JS-Fiddle and see what you can do! Let me know! Thanks everybody!
UPDATE: SOLVED (ish...)
Yes, wierd question sometimes accept wierd answers (like iterating over the DOM...) but if you have a better solution, I'm all ears.
As it turns out, the accepted answers means of evaluating a "CSS template" may be the best means of performing "templating" without the use of third-party libraries or the new <template> tag (that I'm still not sure of) even though it makes my skin crawl (if anyone has a better solution, please post it). Either way, I've updated my JSFiddle, so check it out!
Although, I guess the best answer would be purely making a template as a string in JavaScript, that is, if we are going to be evaluating it later on and pre-pending it to an element. Yea, that would make more sense...

No, this is not possible with plain CSS. However, if you really want to save these templates in CSS, you could iterate over all elements and use
window.getComputedStyle(element, ':before').content
to fetch the content and then prepend/append it to the element. To parse the HTML, you could either use jQuery.parseHTML, new DOMParser().parseFromString or a dummy DOM element. Alternatively, you could also use .innerHTML directly, but I wouldn't recommend that..

using angular ng-style to call out a background image

I am having an with using the ng-style directive. I want to create add a button to my ng-repeat which is css sprite. If i include the sprite normal way my element inspector has a good old moan. from the information i gather from the Angular documentation
i thought it was as simple as the following:
<button ng-style="{'background-image':'url:('/img/Myimage.png')'}">test</button>
However i am receiving a snytax error message from this line of code. Does anyone know the correct method?

<button ng-style="{'background-image':'url(\'img/MyImage.png\')'}">test</button>
is the correct way to do it. was missing the escape the quotes in url 'url:(\'/img/Myimage.png\')'

Your CSS syntax is incorrect for url, you have extra : and I would remove quotes for the src so the whole property is one string
<button ng-style="{'background-image':'url(/img/Myimage.png)'}">test</button>
I really don't undertsand why you would use ng-style for this. A simple CSS rule and class would make more sense since you aren't evaluating anything

oh,{color:' something',background:'something '}
ng-style="{background:'url(something)'}"
or
ng-style="{'background-image':'url(something)'}"

jsPlumb and dynamically added containers

Since there's no jsPlumb forum anywhere I hope someone here can help me.
I want to generate this graph from some data I get from a JSON-API, what this API gives me are "devices" with a name and multiple sinks/sources, which I want to display as a list with the device-name in the first row.
So I thought I'd use some JQuery to generate these divs and add the jsPlumb-endpoints I need to the device. Unfortunately I can only get endpoints on existing divs to work but not on my dynamically generated ones. Firebug shows me the error "myOffset is null" in the addEndpoint function and I don't really see anything that's wrong.
I made a fiddle of it here: http://jsfiddle.net/2mcD2/4/

Id of an element is invalid, : is not allowed in ids.
jQuery("#source:foo") // will not work
jQuery("*[id='source:foo']") // will work, but you'll need to modify `jsPlumb` code in order to make it work this way
Solution: do not use : in ids. _ and - are ok.

there's a jsPlumb group here:
https://groups.google.com/forum/?fromgroups#!forum/jsplumb

Regex replace string but not inside html tag

I want to replace a string in HTML page using JavaScript but ignore it, if it is in an HTML tag, for example:
visit google search engine
you can search on google tatatata...
I want to replace google by <b>google</b>, but not here:
visit google search engine
you can search on <b>google</b> tatatata...
I tried with this one:
regex = new RegExp(">([^<]*)?(google)([^>]*)?<", 'i');
el.innerHTML = el.innerHTML.replace(regex,'>$1<b>$2</b>$3<');
but the problem: I got <b>google</b> inside the <a> tag:
visit <b>google</b> search engine
you can search on <b>google</b> tatatata...
How can fix this?

You'd be better using an html parser for this, rather than regex. I'm not sure it can be done 100% reliably.

You may or may not be able to do with with a regexp. It depends on how precisely you can define the conditions. Saying you want the string replaced except if it's in an HTML tag is not narrow enough, since everything on the page is presumably within some HTML tag (BODY if nothing else).
It would probably work better to traverse the DOM tree for this instead of trying to use a regexp on the HTML.

Parsing HTML with a regular expression is not going to be easy for anything other than trivial cases, since HTML isn't regular.
For more details see this Stackoverflow question (and answers).

I think you're all missing the question here...
When he says inside the tag, he means inside the opening tag, as in the <a href="google.com"> tag...This is something quite different than text, say, inside a <p> </p> tag pair or <body> </body>. While I don't have the answer yet, I'm struggling with this same problem and I know it has to be solvable using regex. Once I figure it out, i'll come back and post.

WORKAROUND
If You can't use a html parser or are quite confident about Your html structure try this:
do the "bad" changing
repeat replace (<[^>]*)(<[^>]+>) to $1 a few times (as much as You need)
It's a simple workaround, but works for me.
Cons?
Well... You have to do the replace twice for the case ... ...> as it removes only first unwanted tag from every tag on the page
[edit:]
SOLUTION
Why not use jQuery, put the html code into the page and do something like this:
$(containerOrSth).find('a').each(function(){
if($(this).children().length==0){
$(this).text($(this).text().replace('google','evil'));
}else{
//here You have to care about children tags, but You have to know where to expect them - before or after text. comment for more help
}
});

I'm using
regex = new RegExp("(?=[^>]*<)google", 'i');

you can't really do that, your "google" is always in some tag, either replace all or none

Well, since everything is part of a tag, your request makes no real sense. If it's just the <a /> tag, you might just check for that part. Mainly by making sure you don't have a tailing </a> tag before a fresh <a>

You can do that using REGEX, but filtering blocks like STYLE, SCRIPT and CDATA will need more work, and not implemented in the following solution.
Most of the answers state that 'your data is always in some tags' but they are missing the point, the data is always 'between' some tags, and you want to filter where it is 'in' a tag.
Note that tag characters in inline scripts will likely break this, so if they exist, they should be processed seperately with this method. Take a look at here :
complex html string.replace function

I can give you a hacky solution…
Pick a non printable character that’s not in your string…. Dup your buffer… now overwrite the tags in your dup buffer using the non printable character… perform regex to find position and length of match on dup buffer … Now you know where to perform replace in original buffer