jQuery replace all single character - javascript

I want to replace all characters in the textarea by a click using jQuery.
For example:
ə = e, ı = i, ...
Thıs ıs əxamplə
By clicking it should be:
This is example

$('textarea').html($('textarea').html().replace(/ə/g,'e'))

Adding on from Zikes
var replace_map={
"ı":"i",
"ə":"e"
};
$('textarea').click(function(){
var ret='';
$.each(this.value.split(''), function(i, str) {
ret += replace_map[str] || str;
})
this.value = ret;
});
DEMO
UPDATED EDIT
var replace_map={
"ı":"i",
"ə":"e"
};
$('textarea').click(function(){
this.value = $.map(this.value.split(''), function(str) {
return replace_map[str] || str;
}).join('');
});
UPDATED DEMO

HTML:
<textarea>Thıs ıs əxamplə</textarea>
JS:
var replace_map={
"ı":"i",
"ə":"e"
};
$('textarea').click(function(){
this.value = this.value.replace(/./g,function(str){
return replace_map[str] || str;
})
});

I don't think you really need jQuery for that other than perhaps to select the textarea element (and then only for a microscopic amount of ease).
Past that you should be able to use just string.replace on the textarea content:
https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/String/replace

Related

search case insensitive letters in textbox

I am trying to search the contents using jquery. Search option working fine. But, I have faced some case insensitive problem here. My full codes on jsfiddle. if i put senthil in my search it didn't show the result. Because, I have Senthil (Uppercase S) in my content. How do I find Uppercase letters in jquery?
JsFiddle
$('#search').on('input', function(){
var text = $(this).val();
$('.subjects a').show();
$('.subjects a:not(:contains(' + text + '))').hide();
$('.subjects a span').show();
});
You can use a custom expression for contains like this:
$.expr[":"].contains = $.expr.createPseudo(function(arg) {
return function( elem ) {
return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
};
});
Updated Fiddle
Add this code to your JS code
$.expr[":"].contains = $.expr.createPseudo(function(arg) {
return function( elem ) {
return $(elem).text().toUpperCase().indexOf(arg.toUpperCase()) >= 0;
};
});
Credits Here

When click a button add value to textarea

<script type="text/javascript">
$(document).ready(function() {
$(".buttons").click(function(){
var cntrl = $(this).html();
$("#txt-area").text(cntrl+",");
//alert (cntrl);
});
});
</script>
When I click to my character on my html page character's value sets to textarea, but when I click to another character previous char disappears. I know about something about arrays in JS but how can I handle this.
How can I add values to textarea properly without disappearing?
Try
$(document).ready(function () {
$(".buttons").click(function () {
var cntrl = $(this).html();
$("#txt-area").val(function (_, val) {
return val + cntrl + ","
});
//alert (cntrl);
});
});
Demo: Fiddle
or
$("#txt-area").text($("#txt-area").val() + cntrl+",");
$("#txt-area").append(cntrl + ",");
Demo: Fiddle - I prefer using val() because I consider it as a input element
Arun's answer above works, but it will add a comma to the end. If you want to avoid that, place the comma before the new value, and then have the code check to see if this is the first time something is being added, and not place a comma that time.
$(document).ready(function () {
var oldvalue;
var newvalue;
$(".buttons").click(function () {
oldvalue = $("#txt-area").val(); //GET THE VALUE OF TEXTBOX WHEN USER CLICKS
if (oldvalue) {newvalue = ', '+$(this).html();} // IF THE TEXTBOX ISN'T BLANK, PLACE A COMMA BEFORE THE NEW VALUE
else {newvalue = $(this).html();} //IF THE TEXTBOX IS BLANK, DON'T ADD A COMMA
$("#txt-area").val(oldvalue + newvalue); //PLACE THE ORIGINAL AND NEW VALUES INTO THE TEXTBOX.
});
});
Try,
$(document).ready(function() {
$(".buttons").click(function(){
var cntrl = $(this).html();
var xTxtArea = $("#txt-area");
xTxtArea.text(xTxtArea.text() + cntrl + ",");
});
});

How to search a text in jquery?

i have a question that if i want to search a perticular text in any page using jquery. what i don't want is that
<p id="1">iii</p>
<p id="2">i</p>
<p id="3">ibiib</p>
<p id="4">bb</p>
<p id="5">tina</p>
<script type="text/javascript">
console.log($("div:contains('i')"));
</script>
this above code gives me all paragraphs except id=4; but what i want is only paragraph with id=2 to be selected.
if there is a way to do that in javascript or any other library reply me...
Use $.filter.
This will return the divs, which contains just one i.
$('div').filter(function () {
return $(this).html() == 'i';
});
$('p').filter(function() {
return $(this).text() === 'i';
});
You can extend jQuery's selector engine to add a new one:
$.expr[':'].texteq = function( elem, i, match, array ) {
return $(elem).text() === match[3];
};
console.log($('p:texteq(i)'));
Example
$("p").each(function(a,b){
if ($(this).html() == 'i'){
console.log(a);
}
});
or
$("p").filter(function(){
return $(this).html() == 'i';
});
You can loop through the paragraphs and check if their content is the same as your desired content. I used a jQuery loop, you can use javascript if you want.
JSFIDDLE
$('p').each(function() {
if(this.innerHTML == 'i') doWhateverYouWant();
});
I would use a simple plugin for this:
$.fn.exactMatch = function(str) {
return this.filter(function() {
return $(this).text() === str;
});
};
$("p").exactMatch("i").css("border", "1px solid red");
You can try it here.

JS filter textbox input

I hope this isn't a daft question. I expected google to be promising but I failed today.
I have a textbox <input type="text" id="input1" /> that I only want to accept the input /^\d+(\.\d{1,2})?$/. I want to bind something to the keydown event and ignore invalid keys but charCode isn't robust enough. Is there a good jQuery plugin that does this?
The affect I want to achieve is for some one to type 'hello world! 12.345' and want all characters to be ignored except '12.34' and the textbox to read '12.34'. Hope this is clear.
Thanks.
I don't think you need a plugin to do this; you could easily attach an event and write a simple callback to do it yourself like so:
$('#input1').keyup(function()
{
// If this.value hits a match with your regex, replace the current
// value with a sanitized value
});
try this:
$('#input1').change(function(){
if($(this).data('prevText') == undefined){
$(this).data('prevText', '');
}
if(!isNaN($(this).val())){
$(this).val($(this).data('prevText'))
}
else {
//now do your regex to check the number settings
$(this).data('prevText', $(this).val());
}
})
the isNAN function checks to make sure the value is a number
$('#input1').bind('keyup', function() {
var val = $(this).val();
if(!val)
return;
var match = val.match(/^\d+(\.\d{1,2})?$/);
if(!match)
return;
//replace the value of the box, or do whatever you want to do with it
$(this).val(match[0]);
});
jQuery Keyfilter
Usage:
$('#ggg').keyfilter(/[\dA-F]/);
It also supports some pre-made filters that you can assign as a css class.
You should look at jQuery validation. You can define your own checking methods like this here.
$('input1').keyup(function(){
var val = $(this).val().match(/\d+([.]\d{1,2})?/);
val = val == null || val.length == 0 ? "" : val[0];
$(this).val(val);
});
I found the solution.
Cache the last valid input on keydown event
Rollback to last valid input on keyup event if invalid input detected
Thus:
var cache = {};
$(function() {
$("input[regex]").bind("keydown", function() {
var regex = new RegExp($(this).attr("regex"));
if (regex.test($(this).val())) {
cache[$(this).attr("id")] = $(this).val();
}
});
$("input[regex]").bind("keyup", function() {
var regex = new RegExp($(this).attr("regex"));
if (!regex.test($(this).val())) {
$(this).val(cache[$(this).attr("id")]);
}
});
});

Highlighting search words like Chrome with jQuery

I have recently done a very simple highlighting with jQuery and a highlight plugin. It looks like this:
$('myButton').click(function() {
$('body').highlight($('#myInputText').val());
});
But I wonder how can I do the Chrome like highlighting, I mean highlight the letters whenever I type in some letter in textbox without submitting. I think maybe use a keyup event... Any ideas?
Thanks Andy, i changed 'this[0]' to 'search[i]' in your code and it works if there is only one 'p' tag
$(document).ready(function(){
var search = ['p', 'div', 'span'];
$("#highlighter").bind('keyup', function(e){
var pattern = $(this).val();
$.each(search, function(i){
var str = search[i];
var orgText = $(str).text();
orgText = orgText.replace(pattern, function($1){
return "<span style='background-color: red;'>" + $1 + "</span>"
});
$(str).html(orgText);
});
});
});
I made quick excersise out of it, code:
$(document).ready(function(){
var search = ['p', 'div', 'span'];
$("#highlighter").bind('keyup', function(e){
var pattern = $(this).val();
$.each(search, function(i){
var str = this[0];
var orgText = $(str).text();
orgText = orgText.replace(pattern, function($1){
return "<span style='background-color: red;'>" + $1 + "</span>"
});
$(str).html(orgText);
});
});
});​​
link: http://jsbin.com/amica3/edit
$('#myInputText').keypress(function(e) {
switch (e.keyCode) {
case 13: // "Enter" was pressed; handle it if you want
return false;
case 27: // ESC was pressed; handle it if you want
return false;
}
$('body').highlight($(this).val());
});
I've edited JAndy's code so the result would match all the occurences in the text and the search would not be case-sensitive.
Link
Hope someone finds this helpful

Categories

Resources