{"id":1199,"date":"2011-05-10T15:30:30","date_gmt":"2011-05-10T14:30:30","guid":{"rendered":"http:\/\/www.donatantonio.net\/blog\/?p=1199"},"modified":"2011-07-18T23:38:08","modified_gmt":"2011-07-18T22:38:08","slug":"jquery-il-metodo-text","status":"publish","type":"post","link":"https:\/\/www.donatantonio.net\/blog\/guide_tutorial\/javascript\/jquery-il-metodo-text\/","title":{"rendered":"JQuery, il metodo .text()"},"content":{"rendered":"

In un articolo precedente<\/a> abbiamo visto le potenzialit\u00e0 e gli usi pratici del metodo .html() di jQuery.
\nEsiste per\u00f2 un metodo che per certi aspetti somiglia molto a quello appena citato, sia per funzionalit\u00e0 che per sintassi, il metodo .text()<\/span>.<\/p>\n

Questo metodo ci permette di leggere e scrivere il contenuto di un elemento HTML che compone la pagina. A differenza per\u00f2 di .html(), il metodo .text() accede esclusivamente ai textNode<\/strong>, operando quindi solo sul testo e tralasciando i tag HTML.
\nChiariamo questo concetto introducendo la sintassi del metodo .text():<\/p>\n

\r\n$('#id_blocco').text();\r\n<\/pre>\n
Con questa linea di codice stiamo accedendo ai contenuti testuali <\/em>dell’elemento identificato tramite id. Se ad esempio avessimo un DIV cos\u00ec definito:<\/p>\n
\r\n<div id='my_div'>\r\n    Questo \u00e8 un blocco di esempio.<br\/>\r\n    Contiene un elenco:\r\n    <ul>\r\n        <li>Voce 1<\/li>\r\n        <li>Voce 2<\/li>\r\n    <\/ul>\r\n<\/div>\r\n<\/pre>\n
richiamando il metodo text() sul div con la seguente sintassi:<\/p>\n
\r\nvar testo = $('#my_div').text();\r\n<\/pre>\n
avvaloreremo la variabile “testo<\/em>” con la seguente stringa:<\/p>\n
Questo \u00e8 un blocco di esempio. Contiene un elenco: Voce 1 Voce 2<\/strong><\/p>\n
Ci\u00f2 che \u00e8 importante notare \u00e8 che il metodo restituisce esclusivamente i nodi di testo<\/span>. I tag HTML non vengono considerati testo e dell’elenco che abbiamo definito \u00e8 stato restuito solo il testo, quindi il contenuto dei tag <li>.<\/p>\n
Come detto ad inizio articolo, il metodo .text() pu\u00f2 essere utilizzato anche per scrivere testo <\/strong>all’interno di un blocco HTML. La sintassi \u00e8 semplice e del tutto simile a quella del metodo .html():<\/p>\n
\r\n$('#id_blocco').text('Testo da inserire');\r\n<\/pre>\n
Il metodo accetta come parametro una stringa, la quale verr\u00e0 scritta all’interno dell’elemento identificato tramite ID.
\nUna caratteristica importante da tenere in considerazione \u00e8 che l’istruzione precedente, se richiamata su un elemento contenente a sua volta altri elementi HTML, sovrascrive tutto il contenuto<\/em>, realizzando quindi un semplice nodo di testo.
\nE’ interessante notare, inoltre, cosa accade quando la stringa in input al metodo contiene codice HTML, in questo caso il codice non verr\u00e0 interpretato, bens\u00ec verr\u00e0 convertito in una semplice stringa di testo.<\/p>\n
Infine vediamo tre funzioni parametrizzate che utilizzano il metodo .text():<\/p>\n
\r\n\/\/ Funzione che restituisce il testo contenuto in un elemento\r\nfunction GetText(id){\r\n    var testo = $('#'+id).text();\r\n    alert('Il testo contenuto \u00e8:\\n\\n'+testo);\r\n}\r\n\/\/ Funzione che scrive un testo in un elemento\r\nfunction SetText(id,testo){\r\n    $('#'+id).text(testo);\r\n}\r\n\/\/ Funzione che aggiunge testo ad un elemento\r\nfunction AddText(id,new_testo){\r\n    var testo = $('#'+id).text();\r\n    $('#'+id).text(testo+new_testo);\r\n}\r\n<\/pre>\n
Nonostante il metodo .text() possa risultare meno utile del metodo .html(), offre molteplici spunti progettuali.
\nLe funzioni viste sono state raccolte in una pagina web d\u2019esempio<\/strong>.<\/p>\n
Cliccando qui<\/a><\/strong> \u00e8 possibile vedere in azione il codice.<\/p>\n
Cliccando qui<\/a><\/strong> \u00e8 possibile scaricare il codice.<\/p>\n","protected":false},"excerpt":{"rendered":"
In un articolo precedente abbiamo visto le potenzialit\u00e0 e gli usi pratici del metodo .html() di jQuery.
\nEsiste per\u00f2 un metodo che per certi aspetti somiglia molto a quello appena citato, sia per funzionalit\u00e0 che per sintassi, il metodo .text().<\/p>\n
Questo metodo ci permette di leggere e scrivere il contenuto di un elemento HTML che compone la pagina. A differenza per\u00f2 di .html(), il metodo .text() accede esclusivamente ai textNode, operando quindi solo sul testo e tralasciando i tag HTML.
\nChiariamo questo concetto introducendo la sintassi del metodo .text():<\/p>\n
$(‘#id_blocco’).text();<\/p>\n
Con questa linea di codice stiamo accedendo ai contenuti testuali <\/em>dell’elemento identificato tramite id. Se ad esempio avessimo un DIV cos\u00ec definito:<\/p>\n
<div id=’my_div’>
\n    Questo \u00e8 un blocco di esempio.<br\/>
\n    Contiene un elenco:
\n    <ul>
\n        <li>Voce 1<\/li>
\n        <li>Voce 2<\/li>
\n    <\/ul>
\n<\/div><\/p>\n
richiamando il metodo text() sul div con la seguente sintassi:<\/p>\n
var testo = $(‘#my_div’).text();<\/p>\n
avvaloreremo la variabile “testo<\/em>” con la seguente stringa:<\/p>\n
Questo \u00e8 un blocco di esempio. Contiene un elenco: Voce 1 Voce 2<\/p>\n
Ci\u00f2 che \u00e8 importante notare \u00e8 che il metodo restituisce esclusivamente i nodi di testo. I tag HTML non vengono considerati testo e dell’elenco che abbiamo definito \u00e8 stato restuito solo il testo, quindi il contenuto dei tag <li>.<\/p>\n
Come detto ad inizio articolo, il metodo .text() pu\u00f2 essere utilizzato anche per scrivere testo all’interno di un blocco HTML. La sintassi \u00e8 semplice e del tutto simile a quella del metodo .html():<\/p>\n
$(‘#id_blocco’).text(‘Testo da inserire’);<\/p>\n
Il metodo accetta come parametro una stringa, la quale verr\u00e0 scritta all’interno dell’elemento identificato tramite ID.
\nUna caratteristica importante da tenere in considerazione \u00e8 che l’istruzione precedente, se richiamata su un elemento contenente a sua volta altri elementi HTML, sovrascrive tutto il contenuto<\/em>, realizzando quindi un semplice nodo di testo.
\nE’ interessante notare, inoltre, cosa accade quando la stringa in input al metodo contiene codice HTML, in questo caso il codice non verr\u00e0 interpretato, bens\u00ec verr\u00e0 convertito in una semplice stringa di testo.<\/p>\n
Infine vediamo tre funzioni parametrizzate che utilizzano il metodo .text():<\/p>\n
\/\/ Funzione che restituisce il testo contenuto in un elemento
\nfunction GetText(id){
\n    var testo = $(‘#’+id).text();
\n    alert(‘Il testo contenuto \u00e8:\\n\\n’+testo);
\n}
\n\/\/ Funzione che scrive un testo in un elemento
\nfunction SetText(id,testo){
\n    $(‘#’+id).text(testo);
\n}
\n\/\/ Funzione che aggiunge testo ad un elemento
\nfunction AddText(id,new_testo){
\n    var testo = $(‘#’+id).text();
\n    $(‘#’+id).text(testo+new_testo);
\n}<\/p>\n
Nonostante il metodo .text() possa risultare meno utile del metodo .html(), offre molteplici spunti progettuali.
\nLe funzioni viste sono state raccolte in una pagina web d\u2019esempio.<\/p>\n
Cliccando qui \u00e8 possibile vedere in azione il codice.<\/p>\n
Cliccando qui \u00e8 possibile scaricare il codice.<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[20],"tags":[273,272,271,274],"_links":{"self":[{"href":"https:\/\/www.donatantonio.net\/blog\/wp-json\/wp\/v2\/posts\/1199"}],"collection":[{"href":"https:\/\/www.donatantonio.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.donatantonio.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.donatantonio.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.donatantonio.net\/blog\/wp-json\/wp\/v2\/comments?post=1199"}],"version-history":[{"count":0,"href":"https:\/\/www.donatantonio.net\/blog\/wp-json\/wp\/v2\/posts\/1199\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.donatantonio.net\/blog\/wp-json\/wp\/v2\/media?parent=1199"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.donatantonio.net\/blog\/wp-json\/wp\/v2\/categories?post=1199"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.donatantonio.net\/blog\/wp-json\/wp\/v2\/tags?post=1199"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}