Getting the alt value and text of an <img> tag and placing it into a textarea

Question

Getting the alt value and text of an <img> tag and placing it into a textarea

I have a textarea that contains the following content:

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

I am aware that I can use javascript to specifically target and retrieve the alt value of the img element as follows:

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

My question is, is there a way to use javascript to select both the alt value of the img tag and the text within the textarea?

javascript

Answer 1

Answer №1

To combine them, you can use the following method:

let $inputArea = $("input#contentTest"),
    inputValue = $inputArea.val(),
    // retrieve alt value by using regex since jQuery cannot detect DOM elements within an input field
    altValueMatch = inputValue.match(/\<img.*?alt=(\"|\')(.*?)\1.*?\>/),
    altValue = (Array.isArray(altValueMatch) && typeof altValueMatch[2] === "string")
        ? altValueMatch[2]
        : null;

// eliminate the img tag from inputValue and remove any extra spaces
inputValue = inputValue.replace(/\<img.*?\>/, "").trim();

let combinedText = [altValue, inputValue].join(" ");

It's not recommended to insert DOM nodes inside an input field as it is meant for plain text.

Answer 2

To combine them, you can use the following method:

let $inputArea = $("input#contentTest"),
    inputValue = $inputArea.val(),
    // retrieve alt value by using regex since jQuery cannot detect DOM elements within an input field
    altValueMatch = inputValue.match(/\<img.*?alt=(\"|\')(.*?)\1.*?\>/),
    altValue = (Array.isArray(altValueMatch) && typeof altValueMatch[2] === "string")
        ? altValueMatch[2]
        : null;

// eliminate the img tag from inputValue and remove any extra spaces
inputValue = inputValue.replace(/\<img.*?\>/, "").trim();

let combinedText = [altValue, inputValue].join(" ");

It's not recommended to insert DOM nodes inside an input field as it is meant for plain text.

Answer 3

Answer №2

It's uncertain whether an img tag can be placed inside a textarea. Why not try this instead:

<!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>

UPDATE: Regarding @JnG's comment: Would it be easier to parse the text like so:

<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>

Check out the JSFiddle demo: https://jsfiddle.net/rfhvfwbz/1/

Answer 4

It's uncertain whether an img tag can be placed inside a textarea. Why not try this instead:

<!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>

UPDATE: Regarding @JnG's comment: Would it be easier to parse the text like so:

<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>

Check out the JSFiddle demo: https://jsfiddle.net/rfhvfwbz/1/

Getting the alt value and text of an <img> tag and placing it into a textarea

Answer №1

Answer №2

Similar questions

tips for choosing a specific dropdown menu item

What are some creative ways to utilize postMessage instead of relying on nextTick or setTimeout with a zero millisecond delay?

Troubleshooting Proxy.php issues in conjunction with AJAX Solr

Is there a way to extract the MIME type from a base64 string?

I seem to be overlooking something. The calculation is not displaying in the designated field

Removing a Button from a Form Using JavaScript

The loading indicator is not appearing inside the designated box

TypeScript multi-dimensional array type declaration

Creating a prompt within a while loop

Establishing a secondary setTimeout function does not trigger the execution of JQUERY and AJAX

Trigger a jQuery modal by clicking on a cell within a table

There seems to be a problem with the JavaScript function as the indexOf property is undefined

Implementing a Reset Button to Clear Checkboxes with PHP or JavaScript

Node.js 'BLOB containing [object File]'

Showing validation for arrays with multiple inputs using Ajax in the Laravel framework

How can I utilize ng-repeat in AngularJS to iterate through an array of objects containing nested arrays within a field?

Error Encountered in Jhipster Application During Initial Launch

Fluctuating CSS appearance during content loading and asynchronous CSS loading

What steps can I take to generate 12 random div elements using jQuery out of a pool of 30?

Is there a way to make JavaScript function properly with PHP-generated content?