We Keep Coding

jQuery selector for data attribute array

Theres' this html code:
<div class="wcpa_form_outer" data-attrrelated="["wcpa-select-1658734650073"]">
for which i'm trying to append html to it. I have tried various approaches but none have worked.
jQuery('.wcpa_form_outer[data-attrrelated="["wcpa-select-1658734650073"]"]').append('some html here');
or
jQuery('.wcpa_form_outer[data-attrrelated="[wcpa-select-1658734650073]"]').append('some html here');
or
jQuery('.wcpa_form_outer').data('attrrelated').append('some html here');
any clues?

The " and/or [] in the attribute value may be the problem Remove it, or try using a part (the most relevant part?) of the attribute value:
$('[data-attrrelated*="1658734650073"]')
.append('some html here!');
$('[data-attrrelated*="wcpa-select-165873465007"')
.append('<br>some html here too!');
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wcpa_form_outer" data-attrrelated="["wcpa-select-1658734650073"]"></div>

Problem is that you're using the HTML Entity " in your attribute. This is being translated to a literal quote. JQuery does not do Entity translation, so it's literally looking for the string ["wcpa-select-1658734650073"] with ampersands and all, not ["wcpa-select-1658734650073"] which is the actual value in your attribute.
You can work around this by using one of the following methods (after also translating the Entity into a quote in your code).
Use a CSS "contains" selector for your attribute ( attr*=value ) (demonstrated by KooiInc's answer) or
Use a string template which will allow you to embed both types of quotes in your string and get an exact match ( attr=value ), shown below
Constructing a string value containing quotes by using string concatenation (e.g. '["' + value + '"]' )
Use the decodeEntities function from this answer to translate your attribute value before attempting the lookup (untested, and it's 10 years old)
jQuery(`.wcpa_form_outer[data-attrrelated='["wcpa-select-1658734650073"]']`).append('foo')
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="wcpa_form_outer" data-attrrelated="["wcpa-select-1658734650073"]">append here:
</div>

How do I take a block of text (with `\n`) from an object property and parse it as paragraphs?

The property is like this.
key: "paragraph.\n More text.\n Another sentence."
How would I show it like...
paragraph.
More text.
Another sentence.
without iterating or split()ting the text?
Number of paragraphs will be unknown at time of read. I have access to the object to rewrite the text in some other format, but it needs to stay as a single property.
I've tried
<p>{item["instruction"]}</p>
<p>{item.instruction}</p>
which both return solid blocks.

You can use for example css 'white-space':
<p style="white-space: pre-line;">{item.instruction}</p>
Or depending on what template library you use replace \n sign with <br /> tag (but most template libs escape html when rendering the value).

you can replace all \n in your string with <br /> element
for replace all \n in your string you must use RegExp in replace method.
var key = "paragraph.\n More text.\n Another sentence."
// put result of this command in your html element
key.replace(/\n/g,'<br />')

Removing HTML elements with special characters

I want to remove HTML DOM object by its ID, that contains special characters(dots, commas etc). I tried to use this code that escapes those characters but it's not working (element its not being removed):
var file_html_id ="#"+ filename.replace(/[!"#$%&'()*+,.\/:;<=>?#\[\\\]^`{|}~]/g, "\\\\$&");
console.log(file_html_id);
$(file_html_id).remove();
where filename its the ID. It's worth to mention that string with escaped characters is displayed as expected. And if I "hardcode" that string it works fine... So where the problem might be?

Instead of trying to escape the characters yourself you could try a couple of other ways:
Use jQuery's escapeSelector() on the id string. This will escape any special characters in the string. Note escapeSelector was added in v3.0 of jQuery. View how they are doing the escaping here
if interested.
$( '#'+ $.escapeSelector('theText') )
Use an attribute selector instead of trying to escape all the possible characters for an id selector
$('[id="idHere"]')
This however will select multiple elements if for some bizarre reason you have multiple elements with the same id.
Demo
var id = "some,weird®,id";
var id2 = "some,other®,id";
$('#'+ $.escapeSelector(id2) ).css({border:'1px solid green'});
$('[id="'+id+'"]').css({border:'1px solid red'});
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div id="some,weird®,id"></div>
<br/>
<div id="some,other®,id"></div>

HTML and JavaScript - How to save plain text right

I want to save a locally generated textfile.
This code almost does what I want:
<a download="filename.txt" href="data:text/plain,sometext">Download</a>
sometext represents a string in that tag attribute (inserted using javascript).
You could imagine it as the content of a textarea which is set by the user.
The problem is that sometext must not contain " or ' because otherwise the href attribute thinks that its content finishes earlier which causes the tag to just save a part of that string when you click on it.
As sometext is generated by the user, it can contain these characters and I do not want to force the user to not use these.
Is there another way to save text files using html/javascript?
I do not want to send sometext to the server. (Which would solve the problem because I could create a file there (including " and ') and feature a download link)

It will depend on how are you adding this something to the href.
First of all, a single quote wont matter, because it is wrapped by double quotes ", so it will work well like this:
Download
When it comes to double quotes, in the HTML context you would have to use the correct notation, in this case it would be ". The HTML will understand it as double quotes:
Download
<!-- It will turn into mytext"text -->
However
Since you said that it will be an user's input, I suppose you might be setting the href through Javascript, so I don't think it would matter, it would be like this:
(Try typing single or double quotes... For JS it won't matter)
var ChangeHref = function() {
var el = document.getElementById("a1");
el.href = "data:text/plain," + document.getElementById("inp1").value;
}
<input id="inp1" type="text" />
<input type="button" value="change href" onclick="ChangeHref()" />
<br />
<a id="a1" download="filename.txt" href="data:text/plain,test">Download</a>

Write a simple javascript to remove ' and " characters like so
userText.replace(/\'/g, '').replace(/\"/g, '');
The / means its a regex, the \' and \" represent the literal characters ' and " and the g at the end makes it find all to occurrences to replace.
But since you want to keep it then do this:
userText.replace(/\'/g, '\\\'').replace(/\"/g, '\\\"');
The \ is a literal backslash. that way when you add it to the name of the file it will escape out and mean a literal ' and ".

Clearing only specific html tags (with or without attributes) from text using javascript

Say I have the following html as text / string:
<html>
<a><span>some text</span></a>
<a attr='attr_value'><b>Some bold text</b></a>
<html>
How can I remove all the <a></a> tags ONLY (with or without attributes) such that I will get the following result:
<html>
<span>some text</span>
<b>Some bold text</b>
<html>
Pure javascript please (no JQuery), maybe replace + regex (?)

The easiest would be:
str.replace(/(<a>)|(<a attr='attr_value'>)|(<\/a>)/g, "");
I think my rgx is correct, but if no try to use http://gskinner.com/RegExr/

You should be able to use the following regex to remove the <a> tags:
/</?a[^>]*>/
/ ... / - the regex delimeters
< ... > - matches the start and end of the tag itself
/? - matches an optional "/" to handle the beginning of a closing tag
a - makes sure that you've captured an <a> tag
[^<]* - matches zero or more of any character that does not close the tag
Since the HTML <a> tag has to close before you can begin another HTML tag, you can use the of the "not a greater than sign" pattern ([^>]) to match any characters inside the tag.
Set it up as a regex variable first, or include it inline in the replace:
var regexATagPattern = new RegExp("</?a[^>]*>", "g");
var new_string = some_string.replace(regexATagPattern, "");
. . . or . . .
var new_string = some_string.replace(/<\/?a[^>]*>/g, "");
(Note the differences in how the pattern is created between the two approaches.)
Note: The ONLY situation where you could run into an issue would be it you have an attribute with a string value that included an escaped ">" in it. If this is a concern, then you'd have to get a lot more complicated.