CODEWITHSUNDEEP
javascriptjquery
Sora
Sora

Reputation: 2551

replacing html tag inside textarea with text

code : 

 <script src="Scripts/jquery-1.8.2.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function () {
        var $this = $("#Test_txtarea");
        var txtval = $this.val();
        $this.find("img").each(function () {
            var imgbytes = $(this).attr("name"); // extract bytes from selected img src 
            $(this).replaceWith(imgbytes);
        });
        $("#NewVal").html(txtval);
     });
</script>

html

<textarea ID="Test_txtarea" >Hi <img src='test.png' name='test' > kifak <img src='test2.png' name='test1' > Mnih <img src='test3.png' name='test3' ></textarea>
 <span id="NewVal" ></span>

what i am trying to do is basically trying to replace each img tag by it's name so the final textarea value will be like this : Hi test kifak test1 Mnih test3

this is the jsfiddle : http://jsfiddle.net/Ga7bJ/2/

the .find("img") always return 0 as length.how can i fix this code ?

Upvotes: 1

Views: 1148

Answers (3)

Rick Hoving
Rick Hoving

Reputation: 3575

Look at this jsFiddle. What is does is:

It gets the value from your Test_txtarea and sets that as the html of a hidden div.
The hidden div wil render the images within the textarea.
After they have been rendered, I find these images,
- get the source,
- remove all characters after the .
- replace the entire html of the image with the src.
After all that has been done you are left with a div with the value you wanted.
All what is done next is the html from the div is copied to the value of your textarea.

 function replaceImageWithSrc(value){
        var div = $("#invisible");
        div.html(value);
        var images = div.find("img");
        images.each(function(index){
           var src = $(this).attr("src").split(".")[0];
           this.outerHTML = src;
        });
    return div.html();

}    
$(document).ready(function () {
        var txtArea = $("#Test_txtarea");
        var txtval = txtArea.val();
        txtval = replaceImageWithSrc(txtval);
        txtArea.val(txtval);
    });

Upvotes: 1

enhzflep
enhzflep

Reputation: 13089

The following code works for me. Basically, I get the value of the text area and append it to an off-screen div. Now that I have valid markup nesting, I can iterate the child-nodes as normal.

function byId(e){return document.getElementById(e)}
function newEl(t){return document.createElement(t)}
function test()
{
    var div = newEl('div');
    div.innerHTML = byId('Test_txtarea').value;
    var msg = '';
    var i, n = div.childNodes.length;
    for (i=0; i<n; i++)
    {
        if (div.childNodes[i].nodeName == "IMG")
            msg += div.childNodes[i].name;
        else if (div.childNodes[i].nodeName == "#text")
            msg += div.childNodes[i].data;
    }
    byId('NewVal').innerHTML = msg;
}

Upvotes: 1

Sumit Gupta
Sumit Gupta

Reputation: 2192

Though it is not complete answer or at least not going to be "Copy paste" answer, there is few things you need to do here:

  1. The content of Textarea is VAL of it and not InnerHTML. So, you have to pick that content as value and than create a hidden div and put it as HTML. Once you did it, you can now find the HTML tags in it using find rather easily.

  2. Once you find tag you can find the name using attr() function

  3. Once you have name, than you again go back to val() of textarea, and do regex replace or using HTML you can replace as well I guess, but not sure.

Upvotes: 2

Related Questions