0

I have a textarea with this content

<textarea id="testContent"> <img src="..." alt="value"> My text.... </textarea>

I know I can use javascript to select the alt value of just img tag as shown

<script>
    var $textfeldVal = document.getElementById("testContent");
    $img = $textfeldVal.getElementsByTagName("img")[0];
    alert("ALT VALUE: "+$img.alt);
</script>

Is there a way I can use javascript to select the alt value <img> along with the text in the textarea?

Chris Martin
  • 30,334
  • 10
  • 78
  • 137
Blaze
  • 2,269
  • 11
  • 40
  • 82
  • 1
    again this isn't angularjs. – Daniel A. White Mar 11 '16 at 13:00
  • This isn't even valid mark-up – Stuart Grant Mar 11 '16 at 13:02
  • How do you mean @ Stuart Grant. This is a code snippet and as well a code challenge – Blaze Mar 11 '16 at 13:04
  • 1
    Well, I guess it can be considered as valid. But indeed ` – Cohars Mar 11 '16 at 13:05
  • Yeah. At that point the textarea only holds and sees this as text – Blaze Mar 11 '16 at 13:07
  • First, it's not valid html to use an img tag in a textarea. You can check this here: https://validator.w3.org So you need to put the image into a div tag with`contentEditable="true"` Second, after that you can get the text value from an element like it is described here: http://stackoverflow.com/questions/6743912/get-the-pure-text-without-html-element-by-javascript if you use jQuery you can simply call `$('#testContent).text();` – Björn Grambow Mar 11 '16 at 13:10
  • You don't have a good picture of the kind of challenge I am facing here. I am not putting tag in a textarea. Just that along the line, I have to retrieve the alt from a text area found in img tag seen as text in a textarea – Blaze Mar 11 '16 at 13:13

2 Answers2

1

Well, if you must, you could concatenate them like this:

var $textarea = $("textarea#testContent"),
    textareaValue = $textarea.val(),
    // get alt value using regex, as jQuery can't find DOM nodes within a textarea
    altValueMatch = textareaValue.match(/\<img.*?alt=(\"|\')(.*?)\1.*?\>/),
    altValue = (Array.isArray(altValueMatch) && typeof altValueMatch[2] === "string")
        ? altValueMatch[2]
        : null;

// remove the img tag from textareaValue and trim any trailing whitespace
textareaValue = textareaValue.replace(/\<img.*?\>/, "").trim();

var concatenated = [altValue, textareaValue].join(" ");

You really shouldn't put DOM nodes inside the textarea though, as it is only designed for plaintext.

user162097
  • 1,250
  • 11
  • 21
  • I am only interested in the alt value which is a text value and everything found in a textarea is a text. – Blaze Mar 11 '16 at 13:09
  • If you only want the alt value, just use the first four variables above, and `altValue` will contain what you want (or be null if no alt attribute exists). As I say, this is a bit of a hacky way of doing it though; ideally, you should never put DOM nodes within a textarea. – user162097 Mar 11 '16 at 13:28
  • You have making series of updates. Which one I pick. Please show a demo – Blaze Mar 11 '16 at 13:31
  • @JnG The most recent one (I just added a check so that the variable will be null if no alt attribute exists). This [JSFiddle](https://jsfiddle.net/hot3ofor/) shows it working, it will alert the value of the alt text when you run it. – user162097 Mar 11 '16 at 13:35
  • What about the content My Text... of the textarea? I want it along with the alt value. Kindly update the output. – Blaze Mar 11 '16 at 13:37
  • That is shown in the full example above, but you said "I am only interested in the alt value". It seems like your Javascript (and HTML) knowledge is still too low right now, so I suggest you read some books or follow some courses to get a better grasp of things before you embark on a serious project. :) Nonetheless, [here's](https://jsfiddle.net/hot3ofor/1/) an updated Fiddle that alerts both values. – user162097 Mar 11 '16 at 13:40
  • I am doing too many things at thesame. Meanwhile had not studied ur codes critically as you have been updating it now and then :) – Blaze Mar 11 '16 at 13:43
  • Okay, hope I helped anyway. – user162097 Mar 11 '16 at 13:48
  • Yeah. Its working! But should incase I insert more than one for instance show more into the textarea. It fails to return the alt value subsequently. I want to be able as well to return anything alt value in an img as many as possible in the textarea thanks. – Blaze Mar 11 '16 at 14:05
  • Great, and yes, I'm here now! Here's [another fiddle](https://jsfiddle.net/hot3ofor/2/) then that iterates over the image tags and pushes their alt values to an array called `altValues`. As an example, I'm alerting all the values in that array too. Please upvote my answer if this helps, thanks! – user162097 Mar 11 '16 at 14:22
  • Yeah. Show only one alert holding all the variables – Blaze Mar 11 '16 at 14:29
  • Yeah, the alerts are just an example, I presume you won't have any in your finished code. You can just replace the `forEach` loop with `alert(altValues)` to alert the entire array (as a string concatenated with commas) at once. – user162097 Mar 11 '16 at 14:32
  • You are a javascript bad guy :) – Blaze Mar 11 '16 at 14:43
1

I'm not sure you can put an img tag inside textarea... Why not simply:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>

        <div>
            <img id="imageDiv" src="..." alt="value">
            <div id="textDiv" contentEditable="true"> My text.... </div>
        </div>


        <script>
            var imageDiv = document.getElementById("imageDiv");
            var textDiv = document.getElementById("textDiv");
            alert("ALT VALUE: "+imageDiv.alt+"  "+textDiv.innerHTML);
        </script>

    </body>
</html>

EDIT: In response to @JnG comment: Then why not just parsing the text:

<textarea id="testContent"> <img src="..." alt="value"> My text.... </textarea>

<script>
    var text = document.getElementById("testContent").innerHTML;
    var tmp = text.split("alt=\"")[1];
    var value = tmp.split("\"")[0];
    var myText = tmp.split("\"&gt;")[1];
    alert(value+" "+myText);
</script>

JSFiddle: https://jsfiddle.net/rfhvfwbz/1/

Quentin Morrier
  • 675
  • 5
  • 14