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

Prevent Javascript Injection in data attribute

I have a script that pulls a text from an API and sets that as a tooltip in my html.
<div class="item ttip" data-html="<?php echo $obj->titleTag;?>">...</div>
The API allows html and javascript to be entered on their side for that field.
I tried this $obj->titleTag = htmlentities(strip_tags_content($this->channel->status)));
I now had a user that entered the following (or similar, he is blocked now I cannot check it again):
\" <img src="xx" onerror=window.location.replace(https://www.youtube.com/watch?v=IAISUDbjXj0)>
which does not get caught by the above.
I could str_replace the window.location stuff, but that seems dirty.
What would be the right approach? I am reading a lot of "Whitelists" but I don't understand the concept for such a case.
//EDIT strip_tags_content comes from here: https://php.net/strip_tags#86964

Well, It's not tags you're replacing now but code within tags. You need to allow certain attributes in your code rather than stripping tags since you've only got one tag in there ;)
What you wanna do is check for any handlers being bound in the JS, a full list here, and then remove them if anything contains something like onerror or so

Using "draggabilly" to create draggable spans

So far on this piece of development I have built this page. As you can hopefully see, it suggests dragging the words on the right sidebar into the slots: http://francesca-designed.me/create-a-status/index.php
The words are pulled from a PHP array, and pressing the button loads some new ones in using AJAX.
I'm trying to implement Dragabilly as it has the functionality and look I want: http://draggabilly.desandro.com/
But I'm running into problems using it. To define which items are draggable, I need to add class="draggie" to each of those spans.
Here is the code that creates my spans:
<div class="words one">
<?php foreach (array_rand($poolOne, 4) as $key) {
echo "<span>".$poolOne[$key]."</span>";
}?>
</div>
So, to make this work I added the "draggie" classname:
echo "<span class="draggie">".$poolOne[$key]."</span>";
However, I have no idea why, but this breaks the WHOLE page. It seems that it can't call in the AJAX any more. But I am not sure, why would adding a simple classname to some PHP cause the whole page to break?
Here is a duplicate of the site code shown in the first link but with the addition of class="draggie" - you'll see that the page just shows up blank. Everything is the same apart from the addition of the draggie class.
http://francesca-designed.me/create-a-status/index2.php

I don't know if this would kill the entire page, but you're trying to nest double quotes.
echo "<span class="draggie">".$poolOne[$key]."</span>";
If there isn't something in PHP-land with the name draggie, PHP will throw an error and quit rendering.
I'm guessing that you have errors turned off, too.
You can either replace the double quotes around draggie with single quotes (class='draggie'), or escape the inner set of double quotes (class=\"draggie\"). I'd recommend just switching to single quotes.

jQuery don't parse escaped HTML in .html() method

Take for example this HTML:
<td onclick="$(this).html('Wanted HTML: <br>; Unwanted HTML: <script>alert('xss')</script>')">
Click to Show</td>
As you can see, I have already escaped (using PHP) the unwanted HTML to entities. But when you click the box it executes the JavaScript.
If I change .html to .text, it displays the line breaks literally as well.
How can I have it show the the <br>s as line breaks, but the <s and >s as literally less than and greater than signs when you click the box?

The problem is that your characters are being decoded in the onclick, before they reach the JavaScript function.
You need to double-encode. So your example would become:
<td onclick="$(this).html('Wanted HTML: <br>; Unwanted HTML: &lt;script&gt;alert(&#39;xss&#39;)&lt;/script&gt;')">
Click to Show
</td>
Notice that I encoded (single encoded) the tags you do want. I also added the missing semicolon on the first >.
Of course the better solution is to remove this from the HTML entirely. Most developers agree that JavaScript is for interactivity and HTML is for content, and they should mix as little as possible (with the JavaScript hooking into the content with calls such as addEventHandler)

Inserting smilies into div with jQuery

I'm working on some small chat application. I want to implement smilies over there so when i click on some smiley it will appear in textarea where user enters his message and when user clicks on select i want smilies to appear in div that contains the conversation.
After some workarounds i got to idea that replacing textarea with div contenteditable="true"
doesn't work that well so i did wrap certain smiley name with ':' like :wink: in textarea but still i need to replace :wink: with real span containing image as background.
Problem is i don't see a way to make this dynamically but doing each one by one.
for example:
if ($('.line:contains(":wink:")').length > 0) {
var oldLineHTML = $('.line:contains(":wink:")').html();
$('.line:contains(":wink:")').html(oldLineHTML.replace(/:wink:/gi, '<span class="wink></span>"'));
I have plenty of smilies so doing this very resource expensive function will costs me much and also will cause me lots of problems during maintenance.
How can i do that dynamically? Or maybe you have better solution which will require to re-design... I'm up to it if it is required.
thanks
}

var testString = "test1 :smile: test2 :wink:";
alert(testString.replace(/:([^:]*):/g, '<span class="$1"></span>'));

My suggestion is read every string that is wrapped by colons :[something]:, then convert it into span. So that you don't have to define every smile, and it is easy to maintain.

If you are doing this on page load, then you can do this in a $(document).ready(). Then you can use selector that you have $('.line:contains(":wink:")') and use the $each operator to loop over each one and perform the update. This will cover you for the page load. But if you refactor that $each code into a method, then you can call it each time the text is updated. I think this will give you the best in both cases. Something like this:
function replaceWinks(){
$('.line:contains(":wink:")').each(function(index) {
//Replace the wink here
});
}
$(document).ready(function(){
replaceWinks();
});
I would recommend replacing the winks server side for the page load though. It will be more performant. Also it will avoid content that changes when after the first view.

Jeaffrey Gilbert's idea is good, but I have another one that may be interesting:
write down you winks the way you want(let's say [SmileName]), and when processing the text with jquery, read every one of them, and replace the [ with <div class=" then replace the ] sign, with "></div>, this way, you will end up like this:
using these smilies:
1- [smile]
2- [wink]
3- [shy]
will lead to the following markup
1- <div class="smile"></div>
2- <div class="wink"></div>
3- <div class="shy"></div>
and using CSS, you will give every class of them, a different background image, which is the smile image.
by utilizing this method, every div will lead to displaying your smilies, and you will write the code once, and end up using it wherever you want, without repeating yourself