We Keep Coding

how to decode string in javascript?

I am trying to decode my string using JavaScript. Here is my code on JSBin.
decordMessage('oppeeennnn','1234');
function decordMessage(m,k) {
var msg = m.split('');
var keysplit = k.split('');
var str ='';
var j =0
for (var i=0;i<msg.length;){
str += msg[i];
if(j < keysplit.length -2 &&i < keysplit.length && keysplit[j]){
i = i + parseInt(keysplit[j]);
j++;
}
console.log(i +"i")
console.log(str);
}
console.log("after");
console.log(str);
}
I make a function in which message and key is passed.
Expected output :: open
Actually string charters are repeated in input message (encrypted message) using key. So I need to decode the message.

You forgot to put a break in the else condition, that's why it was looping infinitely till it ran out of memory. Run it in a browser and the tab will crash:
decordMessage('oppeeennnn','1234');
function decordMessage(m,k) {
var msg = m.split('');
var keysplit = k.split('');
var str ='';
var j =0
for (var i=0;i<msg.length;){
str += msg[i];
if(j < keysplit.length &&i < keysplit.length && keysplit[j]){
i = i + parseInt(keysplit[j]);
j++;
}
else
break;
}
console.log("after");
console.log(str); // prints open
}
By the way, a better way to write the loop would be:
function decordMessage(m,k) {
var msg = m.split('');
var keysplit = k.split('');
var str = '';
var j = 0, i = 0;
while (j < keysplit.length
&& i < msg.length) {
str += msg[i];
i += parseInt(keysplit[j]);
j++;
}
console.log(str)
}

This may helps you.
decordMessage('oppeeennnn', '1234');
function decordMessage(m, k) {
var arr = m.split("");
uniqueArray = arr.filter(function(item, pos) {
return arr.indexOf(item) == pos;
});
console.log(uniqueArray.join(""));
}
Assuming encryption logic goes as 123456....
Sample here

Javascript substring with html tags

I have searched too much on same topic but not is perfect for what I am looking for.
I have a string like :
var string ='<strong><span>Hii </span> <p>this is just a demo <span>string<span></p></strong>'
Now what I want is to substring it with limit with javascript substring function but don't want tags to be cut in middle like for example
<strong><span>Hii </span> <p
It should be like
<strong><span>Hii </span> <p>
I am using
string.substr(0,200)
string is dynamic variable with html tags

My solution:
function smart_substr(str, len) {
var temp = str.substr(0, len);
if(temp.lastIndexOf('<') > temp.lastIndexOf('>')) {
temp = str.substr(0, 1 + str.indexOf('>', temp.lastIndexOf('<')));
}
return temp;
}
http://jsfiddle.net/8t6fs67n/

Its not elegant but it works, will increase the characters to include the next closing tag
https://jsfiddle.net/q680vors/
Just change length to the required number of characters.
var string ='<strong><span>Hii </span> <p>this is just a demo <span>string<span></p></strong>';
var length = 2;
var openTag = 0, closeTag = 0,i=0;
for(i; i<length; i++)
{
if(string[i] == "<")
openTag++;
if(string[i] == ">")
closeTag++;
}
if(openTag > closeTag)
{
while(string[i] != ">")
i++;
}
var newString = string.substring(0,(i+1));
alert(newString);

I don't see reason to do so, but theoretically something like this:
function substrWithTags(str, len) {
var result = str.substr(0, len),
lastOpening = result.lastIndexOf('<'),
lastClosing = result.lastIndexOf('>');
if (lastOpening !== -1 && (lastClosing === -1 || lastClosing < lastOpening)) {
result += str.substring(len, str.indexOf('>', len) + 1);
}
return result;
}
var s = '<strong><span>Hii </span> <p>this is just a demo <span>string<span></p></strong>'
// <strong><span>Hii </span> <p>this is just a demo <spa
s.substr(0, 53);
// <strong><span>Hii </span> <p>this is just a demo <span>
substrWithTags(s, 53);

I think my function is more accurate when it comes to being more sensitive on the content syntax. If your substring length cuts a word in half for example, the word will be included fully.
function HTML_substring(string, length) {
var noHTML = string.replace(/<[^>]*>?/gm, ' ').replace(/\s+/g, ' ');
var subStringNoHTML = noHTML.substr(0, noHTML.indexOf(" ", length));
var words = subStringNoHTML.split(" ");
var outPutString = "";
var wordIndexes = [];
words.forEach((word, key) => {
if (key == 0) {
outPutString += string.substr(0, string.indexOf(word) + word.length);
wordIndexes[key] = string.indexOf(word) + word.length;
} else {
let i = wordIndexes[key - 1];
outPutString += string.substring(i, string.indexOf(word, i) + word.length);
wordIndexes[key] = string.indexOf(word, i) + word.length;
}
});
return outPutString;
}

If I understood you correctly, you want to to do something like this?
var limit = 28;
var test = '';
var string = '<strong><span>Hii </span> <p>this is just a demo <span>string<span></p></strong>';
do {
test = string.substring(0,limit);
limit++;
} while(test.charAt(test.length-1) !== '>');
test will be equal to '<strong><span>Hii </span> <p>'
or will ends with any another closing tag which is above your limit

Well, I did a function:
function my_substring (str) {
var answer = [], x;
for (var i=0, l=str.length; i<l; i++) {
x = i;
if (str[i] == '<') {
while (str[++i] != '>');
answer.push( str.substring(x, i+1) );
}
else {
while (++i < l && str[i] != '<');
answer.push( str.substring(x, i) );
i--;
}
}
return answer;
}
var string =
"<strong><span>Hii </span> <p>this is just a demo <span>string<span></p></strong>"
console.log ( my_substring(string) );
This code will output:
["<strong>",
"<span>",
"Hii ",
"</span>",
" ",
"<p>",
"this is just a demo ",
"<span>",
"string",
"<span>",
"</p>",
"</strong>"
]
Then you can select what you want in the array. Hope it helps.

How to Invert Order of Lines

I have this in a Div (Text actually "wraps" because Div box has short width; except where line breaks are intentional):
"Now is the time
for all good men
to come to the aid
of their country"
"The quick brown fox
jumps over the
lazy dogs"
I would like this:
lazy dogs"
jumps over the
"The quick brown fox"
of their country"
to come to the aid
for all good men
"Now is the time
I've tried using Reverse(); but am not getting the desired results.
Note: I'm not trying to reverse a string per say, but actual lines of text (ie: sentences).

If you got line breaks like this \n, you can do the following:
var lineBreak = "\n",
text = "Now is the time\nfor all good men\nto come to the aid\nof their country";
text = text.split(lineBreak).reverse().join(lineBreak);
If the line break is another sign, change the variable lineBreak.

OK, got it eventually. Based on this answer of mine, I came up with a code that identifies the actual lines inside textarea, even when wrapped.
Next step was to translate div into textarea so we can use the above trick.
Having this, it's simple matter of manipulating the lines using .reverse() method.
Final code is:
$("#btnInvert").click(function() {
var placeholder = $("#MyPlaceholder");
if (!placeholder.length) {
alert("placeholder div doesn't exist");
return false;
}
var oTextarea = $("<textarea></textarea>").attr("class", placeholder.attr("class")).html(placeholder.text());
oTextarea.width(placeholder.width());
//important to assign same font to have same wrapping
oTextarea.css("font-family", placeholder.css("font-family"));
oTextarea.css("font-size", placeholder.css("font-size"));
oTextarea.css("padding", placeholder.css("padding"));
$("body").append(oTextarea);
//make sure we have no vertical scroll:
var rawTextarea = oTextarea[0];
rawTextarea.style.height = (rawTextarea.scrollHeight + 100) + "px";
var lines = GetActualLines(rawTextarea);
var paragraphs = GetParagraphs(lines).reverse();
lines = [];
for (var i = 0; i < paragraphs.length; i++) {
var reversedLines = paragraphs[i].reverse();
for (var j = 0; j < reversedLines.length; j++)
lines.push(reversedLines[j]);
if (i < (paragraphs.length - 1))
lines.push("");
}
rawTextarea.value = lines.join("\n");
placeholder.html(rawTextarea.value.replace(new RegExp("\\n", "g"), "<br />"));
oTextarea.remove();
});
function GetParagraphs(lines) {
var paragraphs = [];
var buffer = [];
$.each(lines, function(index, item) {
var curText = $.trim(item);
if (curText.length === 0) {
if (buffer.length > 0) {
paragraphs.push(buffer);
buffer = [];
}
} else {
buffer.push(curText);
}
});
if (buffer.length > 0)
paragraphs.push(buffer);
return paragraphs;
}
function GetActualLines(oTextarea) {
oTextarea.setAttribute("wrap", "off");
var strRawValue = oTextarea.value;
oTextarea.value = "";
var nEmptyWidth = oTextarea.scrollWidth;
var nLastWrappingIndex = -1;
for (var i = 0; i < strRawValue.length; i++) {
var curChar = strRawValue.charAt(i);
if (curChar == ' ' || curChar == '-' || curChar == '+')
nLastWrappingIndex = i;
oTextarea.value += curChar;
if (oTextarea.scrollWidth > nEmptyWidth) {
var buffer = "";
if (nLastWrappingIndex >= 0) {
for (var j = nLastWrappingIndex + 1; j < i; j++)
buffer += strRawValue.charAt(j);
nLastWrappingIndex = -1;
}
buffer += curChar;
oTextarea.value = oTextarea.value.substr(0, oTextarea.value.length - buffer.length);
oTextarea.value += "\n" + buffer;
}
}
oTextarea.setAttribute("wrap", "");
return oTextarea.value.split("\n");
}
Just put the actual ID of your div and it should work.
Live test case.

warning, this is pseudo code :
lines=[];
index=0;
start=0;
for(characters in alltext){
if(newLine){
lines.push(alltext.substring(start,index);
start=index;
}
i++
}
sortedLines=[]
for(var i=lines.length;i>-1;i--){
sortedLines.push(lines[i]);
html=$('selector').html();
html+=lines[i];
$('selector').append(html);
}
better use split

Javascript - How to replace white spaces which are not in HTML tags?

The following codes doesn't work and the result is broken because there are white spaces in a HTML tag.
HTML:
<div>Lorem ipsum <a id="demo" href="demo" rel="demo">dolor sit amet</a>, consectetur adipiscing elit.</div>
Javascript:
var div = document.getElementsByTagName('div')[0];
div.innerHTML = div.innerHTML.replace(/\s/g, '<span class="space"> </span>');
How to replace replace white spaces which are not in HTML tags?

It would be a better idea to actually use the DOM functions rather than some unreliable string manipulation using a regexp. splitText is a function of text nodes that allows you to split text nodes. It comes in handy here as it allows you to split at spaces and insert a <span> element between them. Here is a demo: http://jsfiddle.net/m5Qe8/2/.
var div = document.querySelector("div");
// generates a space span element
function space() {
var elem = document.createElement("span");
elem.className = "space";
elem.textContent = " ";
return elem;
}
// this function iterates over all nodes, replacing spaces
// with space span elements
function replace(elem) {
for(var i = 0; i < elem.childNodes.length; i++) {
var node = elem.childNodes[i];
if(node.nodeType === 1) {
// it's an element node, so call recursively
// (e.g. the <a> element)
replace(node);
} else {
var current = node;
var pos;
while(~(pos = current.nodeValue.indexOf(" "))) {
var next = current.splitText(pos + 1);
current.nodeValue = current.nodeValue.slice(0, -1);
current.parentNode.insertBefore(space(), next);
current = next;
i += 2; // childNodes is a live array-like object
// so it's necessary to advance the loop
// cursor as well
}
}
}
}

You can deal with the text content of the container, and ignore the markup.
var div = document.getElementsByTagName('div')[0];
if(div.textContent){
div.textContent=div.textContent.replace(/(\s+)/g,'<span class="space"> </span>';
}
else if(div.innerText){
div.innerText=div.innerText.replace(/(\s+)/g,'<span class="space"> </span>';
}

First split the string at every occurrence of > or <. Then fit together all parts to a string again by replacing spaces only at the even parts:
var div = document.getElementsByTagName('div')[0];
var parts = div.innerHTML.split(/[<>]/g);
var newHtml = '';
for (var i = 0; i < parts.length; i++) {
newHtml += (i % 2 == 0 ? parts[i].replace(/\s/g, '<span class="space"> </span>') : '<' + parts[i] + '>');
}
div.innerHTML = newHtml;
Also see this example.
=== UPDATE ===
Ok, the result of th IE split can be different then the result of split of all other browsers. With following workaround it should work:
var div = document.getElementsByTagName('div')[0];
var sHtml = ' ' + div.innerHTML;
var sHtml = sHtml.replace(/\>\</g, '> <');
var parts = sHtml.split(/[<>]/g);
var newHtml = '';
for (var i = 0; i < parts.length; i++) {
if (i == 0) {
parts[i] = parts[i].substr(1);
}
newHtml += (
i % 2 == 0 ?
parts[i].replace(/\s/g, '<span class="space"> </span>') :
'<' + parts[i] + '>'
);
}
div.innerHTML = newHtml;
Also see this updated example.
=== UPDATE ===
Ok, I have completly changed my script. It's tested with IE8 and current firefox.
function parseNodes(oElement) {
for (var i = oElement.childNodes.length - 1; i >= 0; i--) {
var oCurrent = oElement.childNodes[i];
if (oCurrent.nodeType != 3) {
parseNodes(oElement.childNodes[i]);
} else {
var sText = (typeof oCurrent.nodeValue != 'undefined' ? oCurrent.nodeValue : oCurrent.textContent);
var aParts = sText.split(/\s+/g);
for (var j = 0; j < aParts.length; j++) {
var oNew = document.createTextNode(aParts[j]);
oElement.insertBefore(oNew, oCurrent);
if (j < aParts.length - 1) {
var oSpan = document.createElement('span');
oSpan.className = 'space';
oElement.insertBefore(oSpan, oCurrent);
var oNew = document.createTextNode(' ');
oSpan.appendChild(oNew);
}
}
oElement.removeChild(oCurrent);
}
}
}
var div = document.getElementsByTagName('div')[0];
parseNodes(div);
Also see the new example.

Underline first n characters of words

I'd like to underline the first few characters of words in a link, similar to how CSS first-letter works but with a variable number of letters. Alternatively, underlining the first half of a word's letters could be useful. Any way to do this relatively simply with HTML, CSS or Javascript?
(I'm no developer, and am open to all and any suggestions to pass on to the development team ;)

This is text.<br/>
More text.<br/>
No underline.<br/>
Underline me.<br/>
Nada here though.<br/>
a,
a.underline {
text-decoration: none;
}
.underline span {
color: green;
text-decoration: underline;
}
var links = document.links;
var chars = 3;
for (var i = 0, total = links.length; i < total; i++) {
if (links[i].className.indexOf('underline') > -1) {
var text = links[i].innerHTML;
text = '<span>' +
text.substring(0, chars) +
'</span>' +
text.substring(chars);
links[i].innerHTML = text;
}
}
http://jsfiddle.net/hMEHB/
EDIT: Words.
var links = document.links;
var chars = 3;
for (var i = 0, total = links.length; i < total; i++) {
if (links[i].className.indexOf('underline') > -1) {
var text = links[i].innerHTML.split(' ');
for (var p = 0, words = text.length; p < words; p++) {
text[p] = '<span>' +
text[p].substring(0, chars) +
'</span>' +
text[p].substring(chars);
}
links[i].innerHTML = text.join(' ');
}
}
http://jsfiddle.net/hMEHB/1/
EDIT: As a function.
var links = document.links;
var chars = 2;
for (var i = 0, total = links.length; i < total; i++) {
if (links[i].className.indexOf('underline') > -1) {
setUnderline(links[i], chars);
}
}
function setUnderline(link, chars) {
var text = link.innerHTML.split(' ');
for (var p = 0, words = text.length; p < words; p++) {
text[p] = '<span>' +
text[p].substring(0, chars) +
'</span>' +
text[p].substring(chars);
}
link.innerHTML = text.join(' ');
}
http://jsfiddle.net/hMEHB/2/

You can simply put ̲ after any word and it becomes underlined, its a HTML Code.
<input type=button value=S̲end>
It becomes:
S̲end
But you can create a JavaScript function to do it for you, see:
function underlineWord(pos,str){
str = str.substring(0,pos) + str[pos] + "̲" + str.substring(pos+1,str.length);
return str;
}
This way, if you execute:
underlineWord(0,"string");
You will have:
s̲tring

I'm not sure if you're trying to replace the first N letters in a link or the first N letters of each word in a link. If the latter, try replacing the regex
new RegExp("\b\w{1," + N + "}", "g")
with an appropriate replacement such as
function(a) { return "<u>" + a + "</u>"; }
Here's an example:
http://jsfiddle.net/AZpG7/