Develop Reference

How to convert html string code into an actual html working code that will appear in front end?

I am using a v-for"item in items"
then I have values in my {{ item.data }} which is an html element but with a values already, example
{{ item.data }} has a value of a string "<'qr-code value="this has specific infos that is already created for this specific code" '>"
so when I would run it on my page with just {{ item.data }} , this will show up
<'qr-code value="this has specific infos that is already created for this specific code" '>
it prints the html code and not running it.
BUT when i try to copy that code and paste it in my html, it works.
it is just how can I make this string code into an actual working HTML code
How can i resolve this?

The directive v-html will render content from string as plain HTML, you can use like this example.
<div v-html=“yourVar”></div>
If you need more information, here more examples:
https://nexladder.com/vuejs-tutorial/vuejs-v-html-directive

If I understood the situation correctly you are looking for the component tag.
You can use :is="" to set the element node type.
You can find more information here:
https://v2.vuejs.org/v2/guide/components.html#Dynamic-Components

No illegal characters. No single quotes. No double quotes. But escaping still needed

I would imagine that all of these would work.
But only 4 work. The others produce "missing )" errors.
All the "code checkers" I've run them through, claim "no errors at all". None of the string literals contain any single or double quotes at all.
What is the secret way to escape ALL text to avoid ALL errors.
<div onclick='alert("Bob&apos;s" );'> 1 works </div>
<div onclick="alert('Fred&apos;s' );"> 2 fails </div>
<div onclick='alert("Say " hi "");'> 3 fails </div>
<div onclick="alert('Say " hi "');"> 4 works </div>
<div onclick='alert("Bob's" );'> 5 works </div>
<div onclick="alert('Bob's' );"> 6 fails </div>
<div onclick='alert("Say " hi "" );'> 7 fails </div>
<div onclick="alert('Say " hi "' );"> 8 works </div>

The HTML entities are translated to their corresponding characters before passing the string to Javascript. They only escape the characters at the HTML level, not the Javascript level.
So the second one tries to execute the Javascript:
alert('Fred's');
which has improperly nested quotes. You need to include the Javascript escape sequence to protect the quote:
<div onclick="alert('Fred\&apos;s' );">
This will execute Javascript:
alert('Fred\'s');
which is valid.
If you're looking for a general way to generate code that will always be escaped properly, without having to parse it in detail, I don't think there is one. The best solution is not to put Javascript into HTML attributes in the first place, but us unobtrusive Javascript.
<div id="fredalert">
<script>
document.querySelector("#fredalert").addEventListener("click", function() {
alert('Fred\'s');
});
</script>

", ', " and ' are not part of JavaScript. HTML parser will convert them if it encounters them inside HTML; so your code effectively reads:
alert("Bob's" );
alert('Fred's' );
alert("Say " hi "" );
alert('Say " hi "' );
alert("Bob's" );
alert('Bob's' );
alert("Say " hi "" );
alert('Say " hi "' );
which works, or fails, for the predictable reasons.
As comments started saying, it is best not to mix JavaScript and HTML; use external script, and attach things to DOM dynamically (for example, with document.addEventListener). If you absolutely need to have JavaScript inside a HTML attribute (though I've never encountered such a need, nor can I imagine why I would), you can escape the quotes using the backslash, like you normally would:
alert('Bob\'s');
EDIT: If you already have code that needs to be fixed, the easiest way to do that is to ensure that JavaScript is correct; then if such JavaScript is to be placed inside a HTML attribute, to convert the quotes that match the quotes of the attribute into entities. (It won't hurt though if you go overboard and just convert both kinds of quotes.) So, let's say you want to alert "Hi", said Bob's uncle. To make this into a string, you would need to backslash-escape at least one of those quotes (or use template literals). So you get "\"Hi\", said Bob's uncle" as a valid JS string. Then if you're going to place it inside onclick="", you make double quotes (or all quotes) into entities (which you can do , for this final result:
onclick=""\"Hi\", said Bob's uncle""
This is a process that is fairly easy to automate, and will leave you with correct JavaScript, assuming you started with correct JavaScript in the first place.

making links clickable while pushing the data into templates

I am taking inputs from user, then adding links for mentioned users and then passing the same in the template
Input: hello #ds
String after adding links -
"#<a class="tweet-url username" href="/user/ds" data-screen-name="ds" rel="nofollow">ds</a>"
Passing the above string in .Msg (using golang template) :
<div class="panel-body" >
<p > {{.Msg}} </p>
</div>
Expected outcome is: Hello #ds (with clickable link on #ds)
However getting everything in text format (same as input).
#<a class="tweet-url username" href="/user/ds" data-screen-name="ds" rel="nofollow">ds</a>
What am I missing?
Got a better solution. First of all I am doing htmlEscape on the input then store it in db, then while presenting adding links followed by using document.write(string) function. With this I dont have to change the template and I dont have to worry about XSS attach. Also I am also avoiding XSS scripts in my database. –

Try wrapping your string (Msg) in template.HTML to disable the escaping that html/template does.
Example from the docs:
The template
Hello, {{.}}!
can be invoked with
tmpl.Execute(out, template.HTML(`<b>World</b>`))
to produce
Hello, <b>World</b>!
instead of the
Hello, <b>World<b>!
that would have been produced if {{.}}
was a regular string.
Note that you should do this with great care... make sure that you trust the string you're wrapping in template.HTML. This is an easy way to open yourself up to XSS attacks.

Change href in div to normal text

I have one problem. On my website, I have <div id="alpha_bravo">, with links inside. It looks like this:
<div id="alpha_bravo">
<p>text text text link</p>
</div>
I want change every <a href...> to funny text like suprise, as an example.
How can I do it?

Since you tagged the question with PHP and from the comments below the question it seems that you may want to use server-side functionality, I'm going to give an example using PHP.
One way is to replace only links. You are looking for preg_replace() function that will replace all substrings in the string based on a regex pattern.
$input = "<div id='alpha_bravo'><p>text text text <a href='...'>link</a> and <a href='...'>another link</a></p></div>";
$output = preg_replace("/<a (.*?)>(.*?)<\/a>/i", "surprise", $input);
You can also just remove all HTML tags in the string using strip_tags() function.
$input = "<div id='alpha_bravo'><p>text text text <a href='...'>link</a> and <a href='...'>another link</a></p></div>";
$output = strip_tags($input);

Given that this is coming from a database, first word of advice is that you filter your input before saving it in database.
Secondly, if you don't want those links to render and replace them with some other value then use PHP's function preg_replace() as already mentioned by PetrHejda..
PHP docs: http://php.net/manual/en/function.preg-replace.php
Your <a ...>...</a> pattern may differ if users insert styling and classes.
Try using this pattern as your solution: preg_replace("/<a(.+?)href=\"(.+?)\"/", "<a$1href=\"your_value_here\"", $yourStringHere);
You may use g or i flags. Start here with regular expressions: http://www.regular-expressions.info/.

having trouble in displaying text (with double quotes stored in a variable) to a modal through javascript

I am having trouble in displaying text with double quotes through javascript. I want to display a text with double quotes in a modal. But in order to do this, I have to use javascript. The code is like this:
HTML code:
<button id="info" class="btn btn-link" data-toggle="modal" data-target="#infoDetails" data-name="<?php echo $name;?>" data-detail="<?php echo $details;?>" >Click Here</button>
HTML code (inside modal):
<p align="justify" id="detaiLInfo" style="font-size: 14px"> </p>
javascript code to display modal:
<script>
$('#infoDetails').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var name = button.data('name') // Extract info from data-* attributes
var details = button.data('detail')
var modal = $(this)
modal.find('.modal-header #name').text(name)
modal.find('.modal-body #detaiLInfo').text(details)
});
Everything's working properly BUT when the value of $details ="The term biology is derived from the Greek word βίος, bios, \"life\" and the suffix -λογία, -logia, \"study of.\"";
It only gives this OUTPUT (inside the modal):
The term biology is derived from the Greek word βίος, bios,
But when I try to echo it inside html code (but not inside the code for modal) like this: echo $details; , the result is:
The term biology is derived from the Greek word βίος, bios, "life" and the suffix -λογία, -logia, "study of."
Can anyone help me to solve this? Please..

If you examine what's happening, the HTML code generated by the server, as seen literally by the browser client, will get the " that opens "life" and be interpreted as the closing quote of the data-detail attribute, followed by trailing garbage which is then forgiven and ignored by the browser's HTML parser. I suggest using UTF-8 curly quotes in your explanatory text, side-stepping the issue and looking nicer! Otherwise, you could entity-encode the offending internal quotes. In general, packing long and/or formatted text into data fields is sort of a mis-use of the idea. Perhaps such data could instead be packed into the HTML content of a carefully id'd display: none storage area to be extracted dynamically with JS.
Scanning again it looks like a capp-o in detaiLInfo