We Keep Coding

Can't get word on click

I have a script that get the word by getselection method when click, not by user selection, and then show an alert box with the word it's working well with some words, for example:
Si potrebbe comumente
It works with "potrebbe", but not with "Si".... It means, it works when the word is in the middle of the line, but not with the first or last word of the line...
This only happen when after apply the CheckKnowWords function, without apply this function, it works 100%.
The code is to big to post here, so, to prevent visual polution, I create this jsfiddle link: https://jsfiddle.net/fabiobraglin/ww7uLvd1/
ON FIREFOX
InvalidStateError: An attempt was made to use an object that is not, or is no longer, usable
ON CHROME:
Uncaught InvalidStateError: Failed to execute 'surroundContents' on 'Range': The Range has partially selected a non-Text node.
When use:
range.surroundContents(newNode);

Firefox seems to have a number of issues with this code.
1) An error is thrown in some cases
According to the documentation on MDN for Range.surroundContents:
An exception will be thrown, however, if the Range splits a non-Text
node with only one of its boundary points.
It also suggests another method that will work regardless. Instead of
range.surroundContents(newNode);
you can use
newNode.appendChild(range.extractContents());
range.insertNode(newNode);
This will make it so that you will not get errors on beginning and ending words, like Si, or mondo.
2) The popup and title show the entire html
They should show the text instead (e.g. senza instead of <span style="border-radius: 4px;border: 1px solid #ffcccc; background: #ffcccc;">senza</span>). To fix this, you can replace innerHTML with innerText.
More issues
There are a few more issues I found, but this is where it gets tricky. MDN has a warning that Selection.modify is non-standard and doesn't have plans to become standard, so you will get weird behavior between browsers, such as:
In Firefox, punctuation is being included at the end of the word (e.g. forti, or IATA).). In Chrome, this doesn't happen. Also, words with punctuation in them seem to work fine in Chrome but not in Firefox (e.g. the word L'indice looks fine in Chrome but comes up as indice in Firefox).
In Firefox, clicking on a word that follows a recognized word will instead select the recognized word. For example, if you clikc on ognuno where it says viaggo che ognuno di, it will catch the word che, but this doesn't happen in Chrome.
The word Henley is unique in that it is in bold tags. In the phrase britannica Henley & Partners, if you click on either Henley or & in Chrome you will get britannica. In Firefox you will get Henley.
You might want to consider changing the technique for finding the word. For example, you're already going through and highlighting all words you're interested in by wrapping them in a span. Instead of using Range and Selection, you could use the click event to figure out which span you're in, then get the text within that. If your initial checking also excludes punctuation and "words" like &, then you could just select the entire inner text.
Another minor issue I noticed is the HTML uses an unescaped & instead of &. It probably isn't affecting this example, but in general you'll run into less problems if you properly escape HTML (I think it's mainly just <, > and &, but there's plenty of tools and documentation on that elsewhere).
Here's an updated fiddle solving the first two issues, but they may be obsolete if you end up doing some refactoring to solve the other issues.

updated the fiddle. https://jsfiddle.net/ww7uLvd1/8/ Always use split(/\s+/) while trying to split with space

using unicode symbols in ngOption <select>

Hello I've ran into an issue that is stumping me:
So I have an ngOption that loops through and displays unicode symbols
<select class="form-control symbolSelect" ng-model="input.loadSymbol" ng-options="d as d.TagShpUTF for d in loadSymbols" ng-change=""></select>
Here is an example jsFiddle showing it working: http://jsfiddle.net/tjm9a6o2/
I set up the datasource to have a unicode character like so: loadsymbols[0].TagShpUTF = '\u2660'
This all works fine as static data, but when I try to pull the data from my DB it displays it as regular text and doesn't seem to know it's special unicode characters.
This is how I have it setup in the DB (Don't mind other columns, TagShpUTF is the important one):
...what I think it's doing is automatically add a second slash '\' so it can be a valid string, but I don't want that to happen. I want it to be recognized as unicode so it shows the symbols in my dropdown (like jsFiddle), but instead it's showing the actual text (like '\u2660').
Any suggestions would be very helpful. Really need a way of storing these symbols and loading them into a drop down. I tried HTML unicode symbols, but they were giving me even more problems than this method. Thanks!

Eureka!!!
So after many painful attempts and exhausting the kind help from #OrGuz, I kind of gave up on using the \u version of unicode and started looking at HTML-Code version again.
I stumbled upon this SO post buried in the garbage i've been digging through. It had a link to a MDN page about String.fromCharCode()
By storing the HTML- Code number in my DB and calling String.fromCharCode()
I was able to load the symbol in the drop down.
spade: HTML-Code= ♣
TagShpUTF= 9827
String.fromCharCode(TagShpUTF); <---- Works!

Javascript replace() function adding strange characters

Consider the following Javascript:
var previewImg = 'http://example.com/preview_img/hey.jpg';
var fullImg = previewImg.replace('preview','full');
I would expect the value of fullImg to be:
http://example.com/full_img/hey.jpg
In fact, it is... sort of. Running alert(fullImg); shows the expected url string. But when I deliver that variable to jQuery Fancybox, like this:
jQuery.fancybox.open(fullImg);
Something adds characters into the string, like this:
http://example.com/%EF%BF%BCfull_img/hey.jpg
Where is this %EF%BF%BC coming from? What is it? And most importantly, how do I get rid of it?
Some other clues: This is a Drupal 7 site, running jQuery 1.5.1. I'm using that same Fancybox script elsewhere on the site with no issues.

%EF%BF%BC is a sequence of three URL-encoded characters.
You clearly can't see any unexpected characters in the string. That's because the character sequence %EF%BF%BC is invisible.
It's actually a UTF-8 byte-order mark sequence. This sequence typically comes at the start of a UTF-8 encoded text file. They probably got into your code when you did a copy+paste from another file.
The quickest way to get rid of them is to find the bit of code that was copied+pasted, delete the characters on either side of the problem, and retype them. Depending on your editor, you may find the delete behaves strangely as it deletes the hidden characters.
Some text editors and IDEs will have an option to show hidden characters. If your editor has this, it may help you see where the mystery characters are so you can delete them.
Hope that helps.

Cannot set breakpoint on a particular line of IE

I am experimenting TinyMCE editor to set its content on click of an hyperlink. For this I used their own demo page and tried adding a link their. But clicking on link did not set the content of the editor. So I went on debugging it in IE9. I tried putting breakpoint on the line, but surprised - I was able to toggle breakpoint everywhere, except that line.
snapshot here: http://s15.postimage.org/a7ntjabfv/Tiny_MCE_Debug.png
Why is this happening?

Actually, now that you mentioned it...I figured what happened.
The line where you're trying to set the breakpoint looks like invalid html, so IE behaves correctly.
In your example, html attributes (like the onclick you have) are delimited by double quotes ("). But you also have another string delimited by " inside the attributes, which leads to a syntax error. To get around this, you must delimit your strings by single quotes: ' . So the solution that you found is correct.

Custom mark up language breaks html

I am using document.write to output HTML to the browser ( I plan to change to .innerHTML soon).
When using view source I can only see the markup, I can not see the HTML output. However I verified visually that rows 1 and 2 of 0 through 6 are completely missing and commented as such below.
When I inspect the mark up below I see that these two rows have many special characters which leads me to believe this might be the problem.
Note:
Each row is divided by a || and each field is divided by a |. The markup lanaguage is properly escaped as you can see there are no superfulous | or ||.
Actually I just noticed the tag is being cropped for some reason:
https://www.google.com/#hl=en&sclient=psy-ab&q=new+york+city+venture+capitalists&pbx=1&oq=new+york+city+venture+capitalists&aq=f&aqi=&aql=&gs_sm=12&gs_upl=0l0l0l98460l0l0l0l0l0l0l0l0ll0l0&bav=on.2,or.r_gc.r_pw.r_qf.,cf.osb&fp=94def8e69f73d3d7&biw=1214&bih=852
becomes
<a class=\'bookmark_tweet\' target=\'_blank\' href=\'https://www.google.com/#hl=en&sclient=psy-ab&q=new+york+city+venture+cap
I'll post relevant code once I get it:

View source shows you what was received from the server. If you add to it using document.write() you won't see that unless you use a DOM inspector in your browser, such as firebug (Firefox). I know there is one for IE but never use IE so I don't know what it's called.

Javascript strings don't span lines. You can't open a quote on one line, then close it on another.