We Keep Coding

Why does appending a textarea only work with .text and not .val?

Slowly working up my javascript and jquery skills right now and I had been attempting to reset a textarea with .val('') and found that I could not append to it after I had reset it.
var console = $('#console');
function Initialize(data){
console.text(data);
};
function AddText(data){
console.append(data);
};
function clearConsole(){
console.val('');
};
Now if I change console.text(data) to console.val(data) then I cannot append at all, rather I can only set the value. Now I also know there are more methods of getting the text from the textarea, such as .value(), but I haven't messed around with that much because I got my code working by using .text('') instead of .val('')
But I ran into some really strange behavior that is easier to just show instead of type out a description:
var ta, tb, tc;
$(document).ready(function() {
ta = $('#ta');
tb = $('#tb');
tc = $('#tc');
});
//first textarea
function AddText() {
if (ta.text()) {
ta.append(Math.random() + "\n");
} else {
ta.text(Math.random() + "\n");
}
};
function ClearText() {
ta.text('');
}
//second textarea
function AddVal() {
tb.append(Math.random() + "\n");
};
function ClearVal() {
tb.val('');
}
//third textarea
function AddVal2() {
if (tc.val()) {
tc.append(Math.random() + "\n");
alert('Append is being called, but not appending.');
} else {
tc.val(Math.random() + "\n");
}
};
function ClearVal2() {
tc.val('');
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<p> Using .text to initialize the textarea allows .append and clearing</p>
<textarea readonly cols=50 rows=5 placeholder="First textarea : A" id="ta"></textarea>
<br>
<button type="button" id="AddText" onclick="AddText()">Add Text</button>
<button type="button" id="ClearText" onclick="ClearText()">Clear</button>
<br>
<p>Using .val to initialize the textarea does not allow .append after clearing</p>
<textarea readonly cols=50 rows=5 placeholder="Second textarea : B" id="tb"></textarea>
<br>
<button type="button" id="AddVal" onclick="AddVal()">Add Text</button>
<button type="button" id="ClearVal" onclick="ClearVal()">Clear</button>
<br>
<p>Using .val to initialize the textarea with the extra checks doesn't append at all.
<br>An alert is generated to show the append is called, but no appending occurs.</p>
<textarea readonly cols=50 rows=5 placeholder="Third textarea : C" id="tc"></textarea>
<br>
<button type="button" id="AddVal2" onclick="AddVal2()">Add Text</button>
<button type="button" id="ClearVal2" onclick="ClearVal2()">Clear</button>
Can someone explain to me this behavior and the best practice to use? Or is it all really the same and it's just up to preference? Thanks.
EDIT: Bonus jfiddle

I don't know why .append isn't allowed after .val but you shouldn't be using .append. .append is for appending elements not text.
.text is for setting the innerHTML and escaping that HTML so that it appears as plain text.
.val is what you should be using, even for textareas.
To append with .val, just do
$el.val($el.val() + "\nnew content");
Also, it should be noted that your choice of variable name, console, will hide the global variable by the same name (lets you log to your F12 Developer Tools).

Your appends are working, you just aren't seeing them because of a weird quirk. The quirk is that append sets the text property but if you clear the val the text will no longer be visible.
You can see this for yourself by adding console.log(tb.text(), tb.val()) to AddVal(). Adding similar logs to the other functions may be helpful as well.
The really interesting question here is why does it work that way, and that I'm afraid I'll have to leave to someone with deeper knowledge.

input is an html field with a single value:
<input value='whatever' />
but textarea has content:
<textarea>this is the content that can be added to</textarea>
So loosely think that textarea is a block of text which can be added to, input is a variable which can be defined

find and replace text jquery

I have an html:
<input id="replace"></input>
<div id="replacepls">Go!</div>
<br>
<textarea id="text" name="text"></textarea>
and some js code there:
$('textarea[name=text]').val('Hello my dear friend, i love u');
$('#replacepls').click(function(){
var news = $('#replace').val();
var text = $(this).text();
$(this).text(text.replace('friend', news));
});
http://jsfiddle.net/j1ksrdcp/
How can i replace word "friend" in textarea to other word from input on button click? Why my code does not work? Thank you.

You need to use val() instead of text() with textarea, $(this).text() will give you text of div with text Go but not the text in the textarea
Live Demo
$('textarea[name=text]').val('Hello my dear friend, i love u');
$('#replacepls').click(function () {
var news = $('#replace').val();
var text = $('#text').val();
$('#text').val(text.replace('friend', news));
});

You need to use val() instead of text(), and also i simplified your code
$('#replacepls').click(function () {
$("#text").val(function (i, val) {
return val.replace('friend', $('#replace').val())
});
})
Fiddle

Replace $(this).text(text.replace('friend', news));
With:
$(this).text($("#text").val().replace('friend', news));

div search form with formatting

I am trying to create a syntax highlighted search field, where certain items are a particular color, bold, underline, etc. when I type. As I type, I would like the word in to become bold. This works with what I currently have, but when in is typed the cursor goes to the beginning of the div, and you can't type anything after the word in either. What can I do to fix this? You can see the jsfiddle here.
The JavaScript:
$(document).on("keyup", "#q", function(){
var val = $(this).text();
val = val.replace(/\sin\s/ig, " <b>in</b> ");
$(this).html(val);
});
The HTML
<div id="q" name="q" class="form-control input-lg" contenteditable="true"></div>

With the rangy library I was able to accomplish this like this:
$(document).on("keyup", "#q", function(){
var savedSel = rangy.saveSelection();
var val = $(this).html();
val = val.replace(/\sin\s/ig, " <b>in</b> ");
$(this).html(val);
rangy.restoreSelection(savedSel);
});

Copy from textarea to anther textarea but the value of the second textarea should not change

I have two textareas. I am copying data from one to another but if I change data in the first textarea then data in the second textarea is also changed which is obvious.
My requirement is like this: Suppose I have written "country" and it has been pasted to the second textarea. Now if I replace "country" with "anyother" then in the second textarea "country" should not be replaced. If I write something in the first textarea which is new(not replacement) then only that data will be pasted.
Is it possible to do?
My code till now:
function showRelated(e) {
//$('src2').html($('src1').html());
$('#src2').val( $('#src1').val() );
}
<textarea name="source" id="src1" cols="150" rows="20" onkeyup="showRelated(event)"></textarea>
<textarea name="source2" id="src2" cols="150" rows="20"></textarea>
the second text area is hidden from user.whatever the user writes will be copied to second textarea and will be transliterate.The requirement is like this if the user replace some data then also it should not effect the data which he already entered.that is why i need to maintain a copy without using database.

ok it seems this is what you want:
HTML:
<textarea id="src1"></textarea>
<textarea id="src2"></textarea>
JS:
$("#src1").keyup(function() {
var src1_val = $(this).val();
var src2_val = $("#src2").val();
var new_string = src2_val + src1_val;
$("#src2").val(new_string);
});

$('#one').on('blur', function() {
$('#two').val($('#two').val() + '\n' + $('#one').val());
});

You need to do some thing like this
$("#one").blur(function() { // triggering event
var one = $(this).val(); // place values in variable to make them easier to work with
var two = $("#two").val();
var three = one + two;
$("#two").val(three); // set the new value when the event occurs
});

This question isn't the easiest to decipher, but perhaps you want to store translated text into a second textarea?
<textarea id="one"></textarea>
<textarea id="two"></textarea>
var translate = function(input) {
// TODO: actual translation
return 'translated "' + input + '"';
}
var $one = $("#one");
var $two = $("#two");
$one.on('blur', function() {
$two.val(translate($one.val()));
});

how to add space to the end of a string in javascript?

I have the following string.
<span class="add">foo bar1</span>
Now I have to check the last character in this string.If the last character in this string is 1,add a space to the end of the string and move the cursor out of the span tag, Else if the last character in this string is not 1,just move the cursor out of the span and do not add a space.
So can anyone help me how it can be done in javascript.This will happen when I click a button 'Done'. I am quite new to stackoverflow.So if I made q mistake in the question,please forgive me.
Thanks

Is this what you are looking for? This will loop through all elements with the tag
You should add an ID to the tag in HTML
<span class="add" id="test">foo bar1</span>
<br /><br />
<button onclick="addSpace()">Button</button>
Then use the following JS:
function addSpace() {
var testElem = document.getElementById("test");
var contents = testElem.innerHTML;
if (contents.slice(-1) === "1") {
testElem.innerHTML=testElem.innerHTML + "----";
}
}
I made a fiddle
http://jsfiddle.net/nJeyz/2/

You can't move the mouse of the user, that's impossible. However, you can revert focus to an arbitrary element instead.
<button onclick="mine()">Click</button>
<input id="testdiv">
<span id="test">foo bar1</span>
<script>
function mine() {
$string = document.getElementById("test").innerHTML;
if ($string.substring($string.length-1) == "1")
document.getElementById("test").innerHTML+= " ";
document.getElementById('testdiv').focus();
}
</script>