Develop Reference

How can I render JSX tags as text?

Had an idea for my portfolio, whereby I would wrap my surname in JSX component tags - JOE - with the tags as plain old paragraph text within spans, then style. But the tags are obviously being interpreted by my code editor as JSX tags, rather than text, throwing errors.
Does anyone know of an element that would wrap around the tags, rendering them as text? Tried a few things but can't figure it out.
<h1> JOE <span className='neon'> < </span> BLOGGS <span className='neon'> /> </span> </h1>

To render HTML markup as text you can use HTML entities. Replace < with < and > with >:
<h1> JOE <span className='neon'> < </span> BLOGGS <span className='neon'> /> </span> </h1>

You can try wrapping it in curly braces {}, which denote it as a JavaScript expression
<h1> JOE <span className='neon'> {'<'} </span> BLOGGS <span className='neon'> {'/>'} </span> </h1>

You can try {'/>'} to show the characters as text

Either you can use direct {'<'}, {'>'} as an expression or HTML entities <

Why AngularJS prints double quotation in HTML

With AngularJs, I am trying to display currency exchange with image. Here is my Razor code below.
<span ng-controller="CurrencyController">
<span ng-bind="currencies"></span>
</span>
and I am sending the below text from controller
string text = "Dollar : 1.7 <img src=\"~/Images/Currency/up.png\">";
when the HTML is rendered, I took a look at the source in Chrome, and I saw the HTML below...
<span class="ng-binding">
"Dollar: 1.7 <img src="~/Images/Currency/down.png">"
</span>
Why is the rendered text in HTML is surrounded with double quotation? how can I fix this?

You should be using ng-bind-html, as stated in the docs, is the directive used to render html.
ng-bind should only be used if you cant to render a simple html text node.
So, your code should look like this:
<span ng-controller="CurrencyController">
<span ng-bind-html="currencies"></span>
</span>

Appending/Prepending selecting with siblings() not working with HTML tag elements

I have this HTML code:
<span class="apparatus type-substantive">
<span class="reading HQ1">I there’s the </span>
<span class="reading TTQ1 BQ1">ay, there's the </span>
<span class="reading HQ2 BQ2 BF BE HaF MW GBE HJ DB4 BR PE TW TS TTQ2 TTF RSM"> that is the </span>
</span>
And I want to inject "<" and ">" before and after the one with class HQ2 (third span), and { and } before and after the one which has class HQ1 (first span), so I've done this:
$('span.HQ2').prepend('<span class="pended"><</span>').append('<span class="pended">&t;</span>').siblings('.HQ1').prepend('<span class="pended">{</span>').append('<span class="pended">}</span>').css('color','#217b26');
The problem is that the result is not the one I expected, because the second append and prepend are not working, these only work if I remove the span tags and leave the "{" and "}" alone. The .css() works as expected, so the selection is done properly with .siblings(). I think the problem may rely in the result that .siblings() is giving me, maybe it does not accept prepending and appending HTML tags or something. I don't know...
Could you enlighten me?
Thank you very much.

try '\' before greater than and less than marks. this will ensure they are interpreted as text:
$('span.HQ2').prepend('<span class="pended">\<</span>').append('<span class="pended">\></span>').siblings('.HQ1').prepend('<span class="pended">{</span>').append('<span class="pended">}</span>').css('color', '#217b26');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span class="apparatus type-substantive">
<span class="reading HQ1">I there’s the </span>
<span class="reading TTQ1 BQ1">ay, there's the </span>
<span class="reading HQ2 BQ2 BF BE HaF MW GBE HJ DB4 BR PE TW TS TTQ2 TTF RSM"> that is the </span>
</span>

Today I've found out why this wasn't working... apparently I forgot I had a piece of jquery later in the same code preventing me from doing this... I've been fooled by my own code. :/
Thank you all, anyways.

wrap sequence of English characters using regex and javascript

I need to wrap a sequence or group of tandem english characters in a <span> tag.
In the other words I want to change the style of english language in my texts. So I need to find english characters and wrap them in a <span> tag.
The method I'm using now puts every single english character in a <span> tag but I want the group of these chars to be in a single <span> tag.
edit: I want to select and replace a word that is in english language.
For example "russian russian english russian"
What I need is wrap the english "Characters" in <span> tag:
"russian russian <span class='eng'>english</span> russian"

As I understand you need to find words.
So you can use something like:
\b\S+\b
Or if you want replace only word "english" :
Regex:
\b(english)\b
Change to :
<span class='eng'>$1</span>
This text :english russian russian english russian english english.
Changes to this: <span class='eng'>english</span> russian russian <span class='eng'>english</span> russian <span class='eng'>english</span> <span class='eng'>english</span>.
Don't forget to add case insensitive.

Javascript regexp issue - matches only part of result

I'm using this regex
<a [^>]*href[ ]*=[ ]*\"|'[^>]\"|'[^>]*>
to search in example string:
idhasidhioashdoihas <a onclick=alert('blablabla') href='www.hello.com'
onclick=alert('blablabla') > asdfsgdufisdugfusdg
It should match
<a onclick=alert('blablabla') href='www.hello.com'onclick=alert('blablabla') >
but it only matches
'blablabla') href='www.hello.com' onclick=alert('blablabla') >
Any idea where is the problem?

Your | is in the wrong place:
<a [^>]*href[ ]*=[ ]*\"|'[^>]\"|'[^>]*> is effectively:
<a [^>]*href[ ]*=[ ]*\" or '[^>]\" or '[^>]*>
If you want to mark " or ' in this exact place use []:
<a [^>]*href\s*=\s*["'][^>]*["'][^>]*>
Example:
a = "idhasidhioashdoihas <a onclick=alert('blablabla') href='www.hello.com' onclick=alert('blablabla') > asdfsgdufisdugfusdg";
a.match(/<a [^>]*href\s*=\s*["'][^>]*["'][^>]*>/)
["<a onclick=alert('blablabla') href='www.hello.com' onclick=alert('blablabla') >"]

You don't correctly test for the two possible attribute value delimiters. You can use this one :
/<a [^>]*href[ ]*=[ ]*[\"']?[^>][\"']?[^>]*>/
I just changed \"|' to [\"']? (note that it's possible not to have quotes at all, hence the ?)

The character classes you use are not always appropriate and you must surround your alternation by a group (ie: (?:'|")), but you don't need it. You can try this, with the same idea:
<a (?:[^h>]+|h(?!ref))*\bhref\s*=\s*["'][^"']*["'][^>]*>
But if you want only to find a link tag, you can use <a.+?> as thg435 suggests it.
(Note that the href value is not always between quotes:
<a (?:[^h>]+|h(?!ref))*\bhref\s*=\s*(?:["'][^"']*["']|[^\s>]*)[^>]*>
(or to be sure to have the same quotes)
<a (?:[^h>]+|h(?!ref))*\bhref\s*=\s*(?:(["'])(?:\\\1|[^"']+|(?!\1)["'])*\1|[^\s>]*)[^>]*>