Develop Reference

Inserting HTML character entities with JQuery

I'm trying to create a tool that allows me to insert different Spanish characters into a text box such as the inverted question mark. I've currently got the following, but this returns:
function (e){var n,r,i,o=this[0];{if(arguments.length)return i=x.isFunction(e),this.each(function(n){var o;1===this.nodeType&&(o=i?e.call(this,n,x(this).val()):e,null==o?o="":"number"==typeof o?o+="":x.isArray(o)&&(o=x.map(o,function(e){return null==e?"":e+""})),r=x.valHooks[this.type]||x.valHooks[this.nodeName.toLowerCase()],r&&"set"in r&&r.set(this,o,"value")!==t||(this.value=o))});if(o)return r=x.valHooks[o.type]||x.valHooks[o.nodeName.toLowerCase()],r&&"get"in r&&(n=r.get(o,"value"))!==t?n:(n=o.value,"string"==typeof n?n.replace(V,""):null==n?"":n)}}¿
HTML
<div class="container">
<textarea id="text"></textarea>
<div id="one">¿</div>
JS
$('document').ready(function() {
$('#one').click(function() {
$('#text').val($('#text').val + '¿');
});
});
Any ideas on why I'm receiving this output? Also do HTML entities work within textboxes, if not how would I do so? No errors appear in the console.
JSFiddle

$("#text").val is a function, which you are supposed to call.
That said, jQuery is massive overkill for such a trivial task:
document.getElementById('one').onclick = function() {
document.getElementById('text').value += "\u00bf";
}
Note that \u00bf is the appropriate JavaScript escape sequence for ¿ - bf being 191 in hexadecimal.
EDIT: Alternatively, just hold Alt and type 0191 on your keypad. This will produce ¿ directly where you are typing, instead of at the end of the input which is what your JS does.

Try this one. Worked in your fiddle.
$(function() {
$('#one').on('click', function() {
$('#text').val($('#text').val() + "¿");
});
});
Update: I posted spanish sign of question instead of its ASCII, changed $(document).ready to a shorter way $(function(), and added brackets after val().

jQuery or JS to trim characters from inside a span

I'm trying to remove the end of some text within a span using jQuery or JS.
<h3 class="ms-standardheader ms-WPTitle">
<a href="" tabindex="0" accesskey="W">
<nobr>
<span>Programs ‭[1]‬</span>
I have 15 titles that are generated like this in SharePoint - 5 Programs, 5 Clinical Services, and 5 Other Support. I want to remove the [x] from each of them, however this is auto generated by SharePoint because it doesn't like having titles of the same name.
I've tried iterations of:
$('.ms-WPTitle a nobr span').splice(0, -4);
I can't seem to get at the text within the span to trim it. Any suggestions?

$('.ms-WPTitle a nobr span').text(function(el, old){
return old.slice(0, -4);
});
.text() accepts a function, which you can use to easily trim chars
Demo: http://jsfiddle.net/vhTuA/

Since ahren has given one approach you can try this as well: you can also try
demo http://jsfiddle.net/CCvPQ/2/ or http://jsfiddle.net/CCvPQ/4/
API used:
http://api.jquery.com/first/
http://api.jquery.com/text/
http://api.jquery.com/find/
Hope it fits the cause :)
code
jQuery.fn.justtext = function() {
return $(this).children().find('span').text();
};
alert($('.ms-standardheader').justtext());
using .first api
http://jsfiddle.net/qRZe7/1/
jQuery.fn.justtext = function() {
return $(this).children().find('span').first().text();
};
alert($('.ms-standardheader').justtext());

Trying to remove all html from a element with jquery

I have a DIV element that's filled with a bunch of HTML entities that I want to remove:
<div class="text">
<p><p>​<span style="line-height:25px;">​</span><span style="line-height:25px;">​Hej hop!</span> <span style="line-height:25px;">​</span><span</p>
</div>
I'm using jQuery and created this code but it isn't working:
$('.text').each(function () {
$(this).replace(/<\/?[a-z][a-z0-9]*[^<>]*>/ig, "");
});
I'm trying to replace the text with the phrase "Hej Hop!".
The regex is not wrong..
Here is how I did it with some other pages:
text = text.replace(/<\/?[a-z][a-z0-9]*[^<>]*>/ig, "");
But this was in a javascript function with parameters that returned the text.. But on this specific page I need to use jquery and iterate and check...
Question Solved:
$('text').each(function () {
$(this).html(function (i, v) {
return $('<div>').html(v).text();
});
});

You just need:
$('.text').empty();
edit — if you want to remove the markup from the contents of the element, the simplest thing to do would be what Marc B suggested in a comment:
$('.text').each(function() {
$(this).text($(this).text());
});

You can strip them like this using .html()
$('div.text').html(function(i,v){
return $('<div>').html(v).text();
// create new div - append HTML and get the text from the div
});
http://jsfiddle.net/UA9P9/
It still leaves some characters in there so you will probably need to regex them out with your regex
$('div.text').html(function(i,v){
return $.trim($('<div>').html(v).text().replace(/<\/?[a-z][a-z0-9]*[^<>]*>/ig, ""));
});
http://jsfiddle.net/VfxaT/

These are Ascii code so the Regex for that is: /xxx[\x00-\x7F]+xxx/

Is there a way to style textarea content as the user types with javascript and css?

I'm curious if there's a way to style content in a textarea as a user types.
For example:
<textarea>abcdefghijklmnopqrstuvwxyz</textarea>
Could I highlight all the vowels in the above textarea string on screen using javascript? But still only send the string when the form is submitted?

You can use a div with contentEditable attribute instead of textarea and to do the highlighting there.
https://developer.mozilla.org/en-US/docs/HTML/Content_Editable
You will still need to copy the content of this div to a hidden field of a form if you need to post it.

try this
<div contenteditable="true">
This text can be edited by the user.
</div>

give some id to textarea and bind its onkeyup event with jquery function.something like this
$('#id_of_textarea').bind('keyup', function() {
//for displaying vowels on screen
var str=$('#id_of_textarea').val();
var total_findVowels="";
for (var i = 0; i < str.length; i++) {
if (str.charAt(i).match(/[a-zA-Z]/) != null) {
// findVowels
if (str.charAt(i).match(/[aeiouAEIOU]/))
{
total_findVowels=total_findVowels+str.charAt(i);
}
}
//use some label to display all vowels
$("#some_lbl").text(total_findVowels);
}//for
} );

You can see one of those questions for some inspiration. They talk specifically about live syntax highlighting so is it not exactly what you are asking about but maybe close enough, and syntax highlighting seems to be a more common problem so it's easier to find some ready solutions:
Textarea that can do syntax highlighting on the fly?
Are there any JavaScript live syntax highlighters?
https://stackoverflow.com/questions/1505761/textarea-with-syntax-code-highlighting
Live text color change in javascript

If beeing precise and answer only your question:
There is no way to do it, but as others said there are other ways to solve your task

I use the following snipplet:
$( "#yourtextarea" ).bind( "keyup input paste", parseAndReplaceContent );
My parseAndReplaceContent function calls jQuery's $( "#yourtextarea" ).val() to access and modify the data.

Replace a empty space with " " using Jquery

I am looking around on the web but I am not finding anything useful. :(
I am having a problem that I don't understand. I am sure that I am doing something wrong, but I don't know well the syntax of jQuery to understand what is that I am not doing right.
I am using animations with JS and CSS 3, and I am having troubles with empty spaces between the words, and to solve this problems I have to find a way to substitute chars inside a string of text with something else. Like an empty space with a , or as a test that I was trying to do a "n" with a "xxxxx".
What I think that I am doing is:
when the page is loaded
Modify the string of any paragraph with the class .fancy-title that contains "n" with a text "xxxxx"
So:
$(document).ready(function(){
for(i=0; i< myLength+1; i++){
var charCheck = $(".fancy-title").text()[i];
if(charCheck == "n"){
charCheck.replace("n", "xxxxxxxx");
}
}
});
But I receive an error that it said:
charCheck.replace("n", "xxxxxxxx"); it is not a function
I am using jquery
and other scripts that are based on jquery to make animations, rotation and scaling... and they are all in the HEAD with jquery first to load.
What am I doing wrong? Manipulation in jQuery does it need a specific .js extension? I understood that was in the basic capability of jQuery, and looking at other examples all creates me the same kind of error.
I even tried
if(charCheck == "n"){
$(".fancy-title").text()[i] == " "
}
But simply the modification it is not applied on the page. I tried with innerHTML as well :(
I feel so incompetent...
Thank you in advance for any help.

$(document).ready(function(){
$(".fancy-title").each(function(i){
var text = $(this).html();
$(this).html(text.replace(/ /g, " "));
})
});

You have no problem with the replace part :).
$(document).ready(function(){
$(".fancy-title").each(function () { //for all the elements with class 'fancy-title'
var s=$(this).text(); //get text
$(this).text(s.replace(/n/g, 'xxxxxxxx')); //set text to the replaced version
});
});
Just a quick example, hope it works.

Have you tried the css style white-space:pre instead of replacing ' ' with ' '?
http://de.selfhtml.org/css/eigenschaften/ausrichtung.htm#white_space

It seems you are trying to replace a single character with a new string.
You might be able to get the right result by dropping the iteration and simply call .replace on the jQuery-object.