We Keep Coding

Check textarea or input have some special word in need

I want to make a coding area for my website,and I need to make it having color coded(syntax highlighting),and I Google so hard,but I still can't find the right answer for me, and here is my code now.
And I'm using Jquery
HTML:
<textarea class="CodeArea codingground">
<div class="HelloMate">
</div>
</textarea>
JS:
$(function(){
$('.CodeArea.codingground').on('input',function(){
var code = $(this).val();
if (code.indexOf('class')>=0) {
$( "textarea:contains('class')" ).css( "color", "red" );
}
});
});

This is not possible with a textarea.
You can use the <code> tag in conjunction with the contenteditable attribute. Some Javascript and you'll get what you want, even though you should consider to use a library for stuff like that.
var text = jQuery('code').text();
text = text.replace('class', '<span style="color: red">class</span>');
jQuery('code').html(text);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<code contenteditable="true">
class Blubb() {
}
</code>

Using jquery to edit css attribute of a text without selector

I am trying to apply smiley(emoji) to users comments on a page.
Example all the :) will be applied css attributes replaced with.
Is there a way I can use javascript or jquery to achieve this?
$(":)").css("background-image", "url('smile.gif')");
My Problem is the selector part, Since I dont want to apply the css to the whole div.

you need to wrp you html text ':)' with some html and then you can add css/jq to it. See below javascript code and try to add you css to "smiley" class
document.body.innerHTML = document.body.innerHTML.replace(':)', '');

Below is a possibility. I'm assuming at least that you can discern the comments section from the rest of the webpage.
$("#commentsSection").find(":contains(':)')").each(function() {
$(this).html($(this).html().replace(
':)',
'<span style="background-image: url(\'smile.gif\')" />'
));
});
Since you mentioned that you can't process the comments before submitting to the database, you could hook this code to the $(document).ready() event.
$(document).ready(function() {
$("#btn").click(function() {
$("#commentsSection").find(":contains(':)')").each(function() {
$(this).html($(this).html().replace(
':)',
'<span style="background-image: url(\'smile.gif\')" />'
));
});
});
});
/* Just for visual feedback in the snippet */
#commentsSection span {
display: inline-block;
width: 10px;
height: 10px;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="someText">
Don't replace this! :)
</div>
<div id="commentsSection">
<h2>
Comments:
</h2>
<div>
Hello! :)
</div>
<div>
Hi!
</div>
<div>
Hello again! :)
</div>
</div>
<button id="btn">
Replace emojis
</button>

Simple example:
<input type="text" id="text"/>
<div id="smiley"></div>
<script>
$(function() {
var text=$('#text').val();
if(text ==":)") {
$("#smiley").append("<img src="smile.gif"/>);
}
})
</script>

DIV container is not hideable

I am new to jQuery and Javascript and therefore im testing it. I want to create a div container which is draggable and hideable/visible by clicking on a button.
Could someone please tell why my buttons are not working? Could you also tell me how I can set the div container to invisible as standard so that I have to klick on the show button the see it?
CSS
#draggable { width: 150px; height: 150px; padding: 0.5em; }
HTML
<button id="hide">Hide</button>
<button id="show">Show</button>
<div id="draggable" class="ui-widget-content">
<p>Drag me around</p>
</div>
JS
$(function() {
$( "#draggable" ).draggable();
});
$(document).ready(function(){
$("#hide").click(function(){
$("draggable").hide();
});
$("#show").click(function(){
$("draggable").show();
});
});
Here you can see my current code running:
http://jsfiddle.net/tdsdu1uq/2/
Thank you in advance.

you simply have made a mistake in the jQuery selectors.
You should have written the following :
$("#hide").click(function(){
$("#draggable").hide();
});
$("#show").click(function(){
$("#draggable").show();
});
Note the '#' for the id. Your update JSFiddle is here.
Cheers

Change $("draggable").hide();
to
$("#draggable").hide();
and $("draggable").show();
to
$("#draggable").show();
See Demo Here

Append text to text area with jquery issue

Im trying to make some buttons append text to a textarea with jquery, and I have it working, but only if I dont type anything into the textarea itself.
Code:
<textarea name="comments" id="comments" rows="20" style="margin-left: 0px; margin-right: 0px; width: 968px;"></textarea>
<div>
<button>+petname</button>
<button>+lastvisit</button>
<button>+nextvisit</button>
</div>
<script>
$( "button" ).click(function() {
var text = $( this ).text();
$('#comments').append(text);
});
</script>
This code is working, but the minute I type something else into that text area, the buttons no longer work??? WHY!!?? I just cant figure it out.
Much thanks.
Jason

Instead of doing append set val using its function argument syntax, do this way:
$('#comments').val(function(_, val){
return val + text;
});
Demo

change
$('#comments').append(text);
to
$('#comments').val( $('#comments').val() + " " + text );

How do I get the content of a <span> using jQuery?

How do I get the content 'This is my name' of the span?
<div id='item1'>
<span>This is my name</span>
</div>

I think this should be a simple example:
$('#item1 span').text();
or
$('#item1 span').html();

$("#item1 span").text();

Assuming you intended it to read id="item1", you need
$('#item1 span').text()

$('#item1').text(); or $('#item1').html(); works fine for id="item1"

Since you did not provide an attribute for the 'item' value, I am assuming a class is being used:
<div class='item1'>
<span>This is my name</span>
</div>
alert($(".item span").text());
Make sure you wait for the DOM to load to use your code, in jQuery you use the ready() function for that:
<html>
<head>
<title>jQuery test</title>
<!-- script that inserts jquery goes here -->
<script type='text/javascript'>
$(document).ready(function() { alert($(".item span").text()); });
</script>
</head>
<body>
<div class='item1'>
<span>This is my name</span>
</div>
</body>

You could use id in span directly in your html.
<span id="span_id">Client</span>
Then your jQuery code would be
$("#span_id").text();
Some one helped me to check errors and found that he used val() instead of text(), it is not possible to use val() function in span.
So
$("#span_id").val();
will return null.

In javascript wouldn't you use document.getElementById('item1').innertext?

$('span id').text(); worked with me

$('#id span').text() is the answer!

$('#item1 span').html(); Its working with my code

VERY IMPORTANT Additional info on difference between .text() and .html():
If your selector selects more than one item, e.g you have two spans like so
<span class="foo">bar1</span>
<span class="foo">bar2</span>
,
then
$('.foo').text(); appends the two texts and give you that; whereas
$('.foo').html(); gives you only one of those.

<script>
$(document).ready(function () {
$.each($(".classBalence").find("span"), function () {
if ($(this).text() >1) {
$(this).css("color", "green")
}
if ($(this).text() < 1) {
$(this).css("color", "red")
$(this).css("font-weight", "bold")
}
});
});
</script>