jQuery: How can i replace some text by another text in a $('#myId').attr('value') of a textarea?

Question

How can i replace some text by another text in a $('#myId').attr('value') of a textarea ?

I tried something like this :

$(function() {
    var selection;
    var replaceStr;

    var prependStr = "";
    var appendStr = "";

    var temp = "";

    $('input[type="button"]').click(function() {
        if($(this).attr('id') == 'underline')
        {
            prependStr = "<span style = 'text-decoration: underline;'>";
            appendStr = "</span>";
        }
        else if($(this).attr('id') == 'italic')
        {
            prependStr = "<span style = 'font-style: italic;'>";
            appendStr = "</span>";
        }
        else if($(this).attr('id') == 'bold')
        {
            prependStr = "<span style = 'font-weight: bold;'>";
            appendStr = "</span>";
        }
        else if($(this).attr('id') == 'center')
        {
            prependStr = "<span style = 'text-align: center;'>";
            appendStr = "</span>";
        }
        else if($(this).attr('id') == 'link')
        {
            prependStr = "<a href = ''>";
            appendStr = "</a>";
        }
        else if($(this).attr('id') == 'img')
        {
            prependStr = "<img src = '";
            appendStr = "' />";
        }
        else if($(this).attr('id') == 'h1')
        {
            prependStr = "<h1>";
            appendStr = "</h1>";
        }
        else if($(this).attr('id') == 'h2')
        {
            prependStr = "<h2>";
            appendStr = "</h2>";
        }
        else if($(this).attr('id') == 'h3')
        {
            prependStr = "<h3>";
            appendStr = "</h3>";
        }

        $('#page').focus();
        selection = window.getSelection();

        if(selection != '')
        {
            replaceStr = prependStr+selection+appendStr;

            temp = $('#page').attr('value');
            temp.replace(selection, replaceStr);//Not working

            $('#page').attr('value', temp);
        }
    });

});

The whole code is working, exept the function .replace(). I googled a lot of things, but i didn't found a function to do this on a $('#page').attr('value').

Using val() and replace() functions like here? http://stackoverflow.com/a/11585664/3558900 — Randall Valenciano, Jan 14 '16 at 15:49
var textarea = $('#page'); textarea.val(textarea.val().replace(selection, replaceStr)); — Jobelle, Jan 14 '16 at 16:04

score 2 · Answer 1 · answered Jan 14 '16 at 15:52

2

Have a look at this link.

temp.replace(selection, replaceStr) does not change the variable "temp". It returns a new string.

Do sth like this: temp = temp.replace(selection, replaceStr); $('#page').attr('value', temp);

answered Jan 14 '16 at 15:52

Benjamin Schüller

2,104
1
17
29

I did saw this link when i was googling, but didn't understand it, thanks. – Madz Jan 14 '16 at 16:00

score 1 · Accepted Answer · answered Jan 14 '16 at 15:58

$('#page').attr('value'); returns a string, and strings are inmutable, that means when you do temp.replace(selection, replaceStr); it doesn't actually change the string object, all it does is create another string object, so it doesn't change the value of the textarea.

Yo could get what you want with

var textarea = $('#page');
textarea.val(textarea.val().replace(selection, replaceStr));

By the way, jqueryElement.val(value) is the equivalent to jqueryElement.attr('value', value) wich is used to set the value.

Thanks everyone, i didn't understood how replace() was working at all ! — Madz, Jan 14 '16 at 15:59

jQuery: How can i replace some text by another text in a $('#myId').attr('value') of a textarea?

2 Answers2