Develop Reference

avoid delete space while wrong typing

I have a code in JQuery to validate a name with format letters and spaces only. The problem is, when I type a wrong format next to space, the space disappeared and the cursor is next to last letter. This is my code:
<script>
$('input[name="name"]').on('keyup', function(e) {
var re = /^[a-zA-Z\s]+$/.test(this.value);
if(!re) {
this.value = this.value.replace(/[0-9\W]+$/, '');
$('#err_name').show();
} else {
$('#err_name').hide();
}
})
</script>

Please replace this line
this.value = this.value.replace(/[0-9\W]+$/, '');
to this line
this.value = this.value.replace(/[0-9]+$/, '');
Because if you will use \w it replace space also.

Add selected text to textbox with additional info

What I want - A button that (onclick) adds the selected text to a textbox (with the name of "body"). I would like it to be prefixed with a linebreak and greater than sign, and at the end two linebreaks/a paragraph.
My current code:
function
addtext() {
var newtext = '\uA' '\u3E' document.getSelection() '\uA';
this.email.comments.value += newtext;
location.href="#emailme"}
Basically, after selecting text and clicking the button, add the selected text to the form with a few changes. What actually happens is absolutely nothing.
Notes: NO JQUERY. JQuery answers will be ignored. Pure JS only.

try this
var textBox = document.getElementById("text-box"); // replace the id by your text box identifier
var addTextButton = document.getElementById("add-text-button"); // replace the id by your button identifier
function addText() {
// \u000a is escape sequence for line feed
var newText = '\u000a>' + document.getSelection().anchorNode.textContent + '\u000a\u000a';
// add any extra data to new text here like newText += extraData
textBox.value += newText;
}
addTextButton.addEventListener("click", function(event) {
event.preventDefault();
addText();
});

Making a part of an uploaded text file as clickable using javascript

I uploaded one file using javascript. I want to make some parts of the text file as highlighted as well as clickable. For example: I want to make all the "hello" in the uploaded file as clickable and highlighted.
I am able to highlight the text as i have used button tag and changed its background and border property in css but I am unable to do an onclick action when the button is clicked.
I tried it like this:
var sel_data=$("#sel").text(); // for taking the text file in avariable
var str='hello';
//making the regular expression of str
var re = new RegExp(str,"g");
//For replacing the 'str' by highlighted and clickable 'str'
var re_str="<button class='highlight' id='ty' onclick='alertfunc()' value="+str+">"+str+"</button>"
//replacement of 'str' by highlighted and clickable 'str'
var rep_data=sel_data.replace(re,re_str);
sel_data=rep_data;
//function to be executed when the button will get clicked
function alertfunc() {
alert('yellow');
}
I also tried it like this
var str='hello'
var re_str="<button class='highlight' id='ty' value="+str+">"+str+"</button>"
$(".highlight").click(function(){
alert("yellow");
})
or like this
var button = document.getElementById("ty");
button.onclick = function(){
alert("yellow");
}
But none of them is working , Please suggest
I referred the above examples by this link: Html make text clickable without making it a hyperlink

There are just a few things wrong here.
First, execute this code on document ready :
$(document).ready(function(){
// code
});
Then, update the actual html in the DOM :
//replacement of 'str' by highlighted and clickable 'str'
var rep_data=sel_data.replace(re,re_str);
sel_data=rep_data;
$("#sel").html(sel_data); // here
And use event delegation for the click :
$("#sel").on('click', '.highlight', function(){
alert("yellow");
});
demo

This is done by using jQuery library and the ready snippet :contains.
Here is the code you need:
jQuery.fn.highlight = function (str, className) {
var regex = new RegExp(str, "gi");
return this.each(function () {
$(this).contents().filter(function() {
return this.nodeType == 3 && regex.test(this.nodeValue);
}).replaceWith(function() {
return (this.nodeValue || "").replace(regex, function(match) {
return "<span class=\"" + className + "\">" + match + "</span>";
});
});
});
};
Using this snippet will lead the words "hello" to be wrapped around a span with class of your choice.
Now to call this function all you need to do is:
$(".testHighlight *").highlight("hello", "highlight");
Ofcourse you have to setup the .testHighlight class with CSS to be something like:
.testHighlight {
background:yellow;
}
To make them clickable you can do it easily with jQuery:
$(.testHighlight).click(function(){
//YOUR CODE HERE
});
You can check more on this snippet here.

Get certain text replace it and wrap it in span?

I have following html<p class="get">This is some content.</p> what I would like to do is to make it like this:<p class="get">This is <span>some</span> content.</p>. To accomplish this I know I should: 1. get my certain text (done that...)
2. Wrap my text in span (done that also...)
3. replace my text with text that contains my span (haven't done it)
My problem is step 3 I just can't figure it out. So how can I replace my "old" text with new one?Thank you guys!!!
Fiddle here
My code looks like this:
$(document).ready(function(){
//get the whole text
var ptext = $(".get").text().split(" ");
var myText = ptext[2];
//alert(ptext[2])
//alert(myText);
if($('.get').text().contains(myText)){
//$('<span>'+myText+'</span>').appendTo($('.get'));
}
else{
alert('no text');
}
});

var word = "some",
regex = new RegExp("\\b" + word + "\\b", "g");
$(".get").html(function(i, html) {
return html.replace(regex, "<span>$&</span>");
});
DEMO: http://jsfiddle.net/V7Wnk/1/

$('.get').html(function (i, v) {
return v.replace('some', '<span>some</span>');
});

$('.get').html($(".get").html().replace("some","<span> some </span>"));

jQuery putting content of a paragraph in a textarea

I tried to do this for replacing a paragraph with a text area with the same content.
function edit() {
var wdith = $("p").css('width')
$("p:first").replaceWith("<textarea class='edit'>" + $("p:first").text() + "</textarea>")
$(".edit").css("width", wdith)
}
$("#replace").click(edit);
Demo
But it doesn't work correctly. There are spaces before and after the text.
How do I fix it?

You script is doing as it says on the tin. You're getting spaces because you have spaces and line breaks within your <p> tags.
To remove the text formatting, try this: http://jsfiddle.net/z9xCm/18/
function edit() {
var wdith = $("p").css('width');
var p = $("p:first");
var t = p.text().replace("\n", "").replace(/\s{2,}/g, " ").trim();
p.replaceWith("<textarea class='edit'>" + t + "</textarea>")
$(".edit").css("width", wdith)
}
$("#replace").click(edit);
First, we remove the line breaks, then removed multiple repeated spaces, then trim spaces at the beginning and end of the text.
Somewhat off topic, but that can also be rewritten as : http://jsfiddle.net/z9xCm/52/
$("#replace").click(function() {
var p = $("p:first");
p.replaceWith($("<textarea/>", {
"class": "edit",
"text": p.text().replace("\n", "").replace(/\s{2,}/g, " ").trim(),
"css": { "width": p.css('width') }
}));
});
Here's the same thing, but in a less compact and commented form.
$("#replace").click(function() { /* assign anonymous function to click event */
var p = $("p:first"); /* store reference to <p> element */
/* get p.text() without the formatting */
var t = p.text().replace("\n", "").replace(/\s{2,}/g, " ").trim();
/* create new textarea element with additional attributes */
var ta = $("<textarea/>", {
"class": "edit",
"text": t,
"css": {
"width": p.css('width')
}
});
p.replaceWith(ta); /* replace p with ta */
});
Note that the $("...", {...}) syntax for creating new elements with attributes was only introduced in jquery 1.4.

You can use the method $.trim() to remove the spaces at the begin and end:
$.trim($("p:first").text());

You could trim each line manually: http://jsfiddle.net/z9xCm/14/.
function edit() {
var wdith = $("p").css('width');
var spl = $("p").text().split("\n");
spl = spl.map(function(v) {
return v.trim();
});
var txt = spl.join(" ").trim();
$("p:first").replaceWith("<textarea class='edit'>" + txt + "</textarea>")
$(".edit").css("width", wdith)
}
$("#replace").click(edit);

You're paragraph has leading spaces at the start of each line. These are remaining when you convert it to a textarea. So remove the spaces from the <p> block to fix the issue.
Updated demo
Also remove line breaks if you don't want them to remain.
Updated demo without line breaks either

Use the following with a regular expression replacement (updated Fiddle):
function edit() {
var wdith = $("p").css('width')
$("p:first").replaceWith("<textarea class='edit'>" + $("p:first").text().replace(/[\n\r](\s*)/g," ").trim() + "</textarea>")
$(".edit").css("width", width)
}
$("#replace").click(edit);