Develop Reference

Javascript: Find special characters in string

I have this code:
var text = "ß042´ßzpüwhü90hu54/()=?*/()=?*";
var symboles = "!§$%&/()=?*<;:-<,.-#+|~}][{#€";
var symbolsContained = "", found = false;
for (var i = 0; i < symboles.length; i++) {
if (text.indexOf(symboles[i]) != -1) {
found = true;
symbolsContained += symboles[i];
}
}
console.log(symbolsContained, symbolsContained.length);
Unfortunately it is not working properly:
symboles[1] finds a character that is not in the list ("A" with a ":" above it)
The "€" is not processed properly
Using substr() doesn't fix this. I guess it is a subject of character encoding but this is still a mystery for me. Any hint how this can be fixed?

Regarding the Euro sign I found the solution here:
https://www.experts-exchange.com/questions/21092349/Euro-character-in-javascript.html
var symboles = "!§$%&/()=?*<;:-<,.-#+|~}][{#\u20AC";
Remains the cryptic character at symboles[1] which also appears in the result. In 11dimension's environment apparently this is not the case.
I have Windows 7 and Opera.

I'm having trouble with limitkeypress.js and IE10

In a project I'm working on, I have a textbox where the user has to input his name. To avoid the user from entering numbers I used the jquery.limitkeypress.js library written by Brian Jaeger and every thing was working perfectly until I tested the website in Internet Explorer 10. In IE10, you can input all the letters you want, and you can not input number or weird symbols just as I wanted but when I type a space and then a letter, I see the letter print right to the space and then the space disappearing and the latter shifting to the left. The weird thing is that if I wait like 30 seconds after typing the space to type the letter it works fine.

jquery.limitkeypress.js has some issue with ie, I recommend you to use a more powerful library.
http://github.com/RobinHerbots/jquery.inputmask
With this library you can use something like this:
$(".numbers").inputmask('Regex', {
mask: "9",
repeat: 11,
placeholder: ""
});
It works perfectly on ie. :)

Sorry i have not updated that plugin in a few years but...
jquery.limitkeypress now works with IE9+ there was an issue with how the selection was determined.
IE11 killed support for their document.selection but they kept the document.setSelectionRange which i was using to test what browser was being used...
IE9 enabled document.selectionStart and document.selectionEnd so i now check directly what browser version of IE peoples are using...
I added this to check for IE version:
var ie = (function(){
var undef,
v = 3,
div = document.createElement('div'),
all = div.getElementsByTagName('i');
while (
div.innerHTML = '<!--[if gt IE ' + (++v) + ']><i></i><![endif]-->',
all[0]
);
return v > 4 ? v : undef;
}());
So my selection functions now look like this:
function getSelectionStart(o) {
if (ie < 9) {
var r = document.selection.createRange().duplicate()
r.moveEnd('character', o.value.length)
if (r.text == '') return o.value.length
return o.value.lastIndexOf(r.text)
} else return o.selectionStart
}
function getSelectionEnd(o) {
if (ie < 9) {
var r = document.selection.createRange().duplicate()
r.moveStart('character', -o.value.length)
return r.text.length
} else return o.selectionEnd
}

How do I detect IE10 using javascript?

As many already posted in other questions (also in jQuery documentation), the old jQuery.browser.version is deprecated and works only in jquery1.3.
Do you know another simple way to detect it, that I can include in my code before:
function handleInfoDivPopupVisibility(dynamicEleId, staticEleId){
var parentContainer = $('headerSummaryContainer');
var dynamicEle = $(dynamicEleId);
var staticEle = $(staticEleId);
if(isIE() && parentContainer){
if (jQuery.browser.version != 10) { // I need to find a way to detect if it's IE10 here.
parentContainer.style.overflow = 'visible';
}
}
dynamicEle ? dynamicEle.style.display = '' : '';
if(dynamicEle && staticEle)
gui_positionBelow(dynamicEle, staticEle);
}
Before you say it's duplicated question of this or this, I'd like to reinforce that I don't want to use css hacks. Is there a way to detect it just as simple as I could do before?
if (jQuery.browser.version != 10) {...

In general it's a bad idea to check for browser version, it's considered a better practice to check for browser features. But if you're sure what you're doing:
function getIEVersion(){
var agent = navigator.userAgent;
var reg = /MSIE\s?(\d+)(?:\.(\d+))?/i;
var matches = agent.match(reg);
if (matches != null) {
return { major: matches[1], minor: matches[2] };
}
return { major: "-1", minor: "-1" };
}
var ie_version = getIEVersion();
var is_ie10 = ie_version.major == 10;
We have the following code in production, so it works and well-tested.
And yes, we did have a need to detect IE10, not just a particular feature that exists in IE10 but not in earlier versions.

Internet Explorer has the feature of Conditional Compilation (http://www.javascriptkit.com/javatutors/conditionalcompile.shtml). You can use this:
var isIE10 = false;
/*#cc_on
if (/^10/.test(#_jscript_version)) {
isIE10 = true;
}
#*/
alert(isIE10);
DEMO: http://jsfiddle.net/X3Rvz/1/
You can put this before all your JavaScript code, and from then on just reference isIE10.
The conditional compilation won't run in non-IE, so isIE10 will still be false. And #_jscript_version will only start with 10 in IE 10.
Conditional Comments aren't supported in IE 10, and the User-Agent string can be spoofed.
Since minification usually removes comments, you can use eval or Function to find out in a similar fashion:
var isIE10 = false;
if (Function('/*#cc_on return /^10/.test(#_jscript_version) #*/')()) {
isIE10 = true;
}
DEMO: http://jsfiddle.net/wauGa/2/
UPDATE:
To still avoid minification of comments but also combine detecting any version, you can use something like:
var IE = (function () {
"use strict";
var ret, isTheBrowser,
actualVersion,
jscriptMap, jscriptVersion;
isTheBrowser = false;
jscriptMap = {
"5.5": "5.5",
"5.6": "6",
"5.7": "7",
"5.8": "8",
"9": "9",
"10": "10"
};
jscriptVersion = new Function("/*#cc_on return #_jscript_version; #*/")();
if (jscriptVersion !== undefined) {
isTheBrowser = true;
actualVersion = jscriptMap[jscriptVersion];
}
ret = {
isTheBrowser: isTheBrowser,
actualVersion: actualVersion
};
return ret;
}());
And access the properties like IE.isTheBrowser and IE.actualVersion (which is translated from internal values of JScript versions).

The jQuery.browser.version still works but you have to include the jquery-migrate plugin.
http://api.jquery.com/jQuery.browser/
https://github.com/jquery/jquery-migrate/#readme

The IE10 User-Agent String says
However if your site is still using user-agent sniffing, then increasing the “MSIE” token to “10.0” is particularly noteworthy. Why? Because it adds an extra digit to the string value of the token. Most sites will handle this effortlessly, but some will process the extra digit incorrectly, causing them to identify IE10 as IE1.
To help illustrate, here’s a regular expression that only captures the first digit of the “MSIE” token’s value:
// INCORRECT: will report IE10 version in capture 1 as "1"
var matchIE = /MSIE\s(\d)/;
And here’s one that captures the full value of the “MSIE” token:
// Correct: will report IE10 version in capture 1 as "10.0"
var matchIE = /MSIE\s([\d.]+)/

Here is a one line solution to detect IE 10
var IE10 = navigator.userAgent.toString().toLowerCase().indexOf("trident/6")>-1;
and for more information on other version and browsers please refer this Link of Browser Detection

I Found myself having a issue (border radius on frameset with legend) with IE 9 through 11 (did not check IE 12)
MSIE is no long user agent in IE 11 and the appName is Mozilla, however trident is in there
I managed to extract the trident version # and detect it
if(navigator.appVersion.indexOf('Trident/')>-1){// Begin stupid IE crap
var IE=navigator.appVersion;
IE=IE.slice(IE.indexOf('Trident/')+8);
IE=IE.slice(0,IE.indexOf(';'));
IE=Number(IE);
if(IE>=5&&IE<=7) // IE 9 through IE 11
document.body.className='ie';
}

Carriage Returns replacement in IE9

I'm trying to display some data in a <div> and IE9 is not keeping more than one carriage return. This works fine in Chrome, but not IE9 (it only adds the <br/>) Here's the code:
$.get(url,function(xml){
$("record",xml).each(function(){
var profile= $("profile",this).text().replace(/\r\n|\r|\n/g,'~').replace(/~~/g,'<\/p> <p>').replace(/~/g,'<br/>');
profileRpt += profile
});
});
Thought process on this was to normalize, then add <p> for double carriage returns and <br> for the single returns.
I've also tried the simple replacement,
var points= $("points",this).text().replace(/\n\r?/g, '<br />');
and again this worked fine in Chrome, but not in IE9.
Does anyone know of a way I can get this to work in IE9? Thanks!!
UPDATE
So it seems that jQuery is the culprit when used in IE, as it collapses the line breaks prior to any replace function.
Can anyone help with using an alternate (non-jQuery) method of retrieving the data from the xml response as I've done above? One that would preserve the line breaks?
Thanks for your help!

Try this:
function unifyLineFeeds = function(str) {
return str.replace("\r\n", "\n").replace("\r", "\n");
}
You can then use this function to output text as HTML following way:
// `text` var contains text with line ununified line feed characters.
text = unifyLineFeeds(text);
var lines = text.split("\n"),
count = lines.length,
lastIndex = count - 1;
var container = document.getElementById('someContainerToShowFormattedText');
for (var i = 0; i < count; i++) {
container.appendChild(document.createTextNode(lines[i]));
if (i < lastIndex) {
container.appendChild(document.createElement('br'));
}
}

var points = $("points", this).text().replace(/\r+/g, '').replace(/\n/g, '<br>');

Convert HTML Character Entities back to regular text using javascript

the questions says it all :)
eg. we have >, we need > using only javascript
Update: It seems jquery is the easy way out. But, it would be nice to have a lightweight solution. More like a function which is capable to do this by itself.

You could do something like this:
String.prototype.decodeHTML = function() {
var map = {"gt":">" /* , … */};
return this.replace(/&(#(?:x[0-9a-f]+|\d+)|[a-z]+);?/gi, function($0, $1) {
if ($1[0] === "#") {
return String.fromCharCode($1[1].toLowerCase() === "x" ? parseInt($1.substr(2), 16) : parseInt($1.substr(1), 10));
} else {
return map.hasOwnProperty($1) ? map[$1] : $0;
}
});
};

function decodeEntities(s){
var str, temp= document.createElement('p');
temp.innerHTML= s;
str= temp.textContent || temp.innerText;
temp=null;
return str;
}
alert(decodeEntities('<'))
/* returned value: (String)
<
*/

I know there are libraries out there, but here are a couple of solutions for browsers. These work well when placing html entity data strings into human editable areas where you want the characters to be shown, such as textarea's or input[type=text].
I add this answer as I have to support older versions of IE and I feel that it wraps up a few days worth of research and testing. I hope somebody finds this useful.
First this is for more modern browsers using jQuery, Please note that this should NOT be used if you have to support versions of IE before 10 (7, 8, or 9) as it will strip out the newlines leaving you with just one long line of text.
if (!String.prototype.HTMLDecode) {
String.prototype.HTMLDecode = function () {
var str = this.toString(),
$decoderEl = $('<textarea />');
str = $decoderEl.html(str)
.text()
.replace(/<br((\/)|( \/))?>/gi, "\r\n");
$decoderEl.remove();
return str;
};
}
This next one is based on kennebec's work above, with some differences which are mostly for the sake of older IE versions. This does not require jQuery, but does still require a browser.
if (!String.prototype.HTMLDecode) {
String.prototype.HTMLDecode = function () {
var str = this.toString(),
//Create an element for decoding
decoderEl = document.createElement('p');
//Bail if empty, otherwise IE7 will return undefined when
//OR-ing the 2 empty strings from innerText and textContent
if (str.length == 0) {
return str;
}
//convert newlines to <br's> to save them
str = str.replace(/((\r\n)|(\r)|(\n))/gi, " <br/>");
decoderEl.innerHTML = str;
/*
We use innerText first as IE strips newlines out with textContent.
There is said to be a performance hit for this, but sometimes
correctness of data (keeping newlines) must take precedence.
*/
str = decoderEl.innerText || decoderEl.textContent;
//clean up the decoding element
decoderEl = null;
//replace back in the newlines
return str.replace(/<br((\/)|( \/))?>/gi, "\r\n");
};
}
/*
Usage:
var str = ">";
return str.HTMLDecode();
returned value:
(String) >
*/

Here is a "class" for decoding whole HTML document.
HTMLDecoder = {
tempElement: document.createElement('span'),
decode: function(html) {
var _self = this;
html.replace(/&(#(?:x[0-9a-f]+|\d+)|[a-z]+);/gi,
function(str) {
_self.tempElement.innerHTML= str;
str = _self.tempElement.textContent || _self.tempElement.innerText;
return str;
}
);
}
}
Note that I used Gumbo's regexp for catching entities but for fully valid HTML documents (or XHTML) you could simpy use /&[^;]+;/g.

There is nothing built in, but there are many libraries that have been written to do this.
Here is one.
And here one that is a jQuery plugin.