AngularJS: select alt value and text from img tag in a textarea content

Question

I have a textarea like this

<textarea><img src="..." alt="hello"/> lets go visit the beach ....</textarea>

that fetches from an external resource into a text. I am thinking of doing something like but somehow lost along the line

.controller('textCtrl', function ($scope) {
$scope.setValue = function(value){
 angular.element('textarea img').val

var altValues = [];
while (true) {
    var altValueMatch = textareaValue.match(/\<img.*?alt=(\"|\')(.*?)\1.*?\>/),
        altValue = (Array.isArray(altValueMatch) && typeof altValueMatch[2] === "string")
            ? altValueMatch[2]
            : null;

    if (altValue !== null) {
        altValues.push(altValue);
    } else {
        break;
    }

    textareaValue = textareaValue.replace(/\<img.*?\>/, "").trim();
}

//altValues.forEach(function(altValue, i) { alert("ALT VALUE " + i + ": " + altValue);})
//alert("TEXTAREA VALUE: " + textareaValue);
//alert(altValues +" "+textareaValue);

var concatenated = [altValues, textareaValue].join(" ");
//concatenated.replace(/&nbsp;|,/g,"");
//alert(concatenated);
$('#messageID').val(concatenated);

When I use the above code, it fails. Please what am I doing wrong? Kindly assist

score 0 · Answer 1 · edited May 23 '17 at 12:23

If I'm reading your question correctly, you want to extract the alt="text" from the retrieved data? Here's a plnkr that does it http://plnkr.co/edit/bb3g8tNFU0E3Td7xGoe5?p=preview

app.controller('MainCtrl', function() {
  var vm = this;
  vm.name = 'World';
  vm.content = 'Hello <img src=".." alt="text">';
  vm.content2 = vm.content;

  init();

  function init(){
    replaceText();
  }

  function replaceText(){
    var re = /<img src=".*" alt="(.*)">/gi;
    vm.content2 = vm.content.replace(re, "$1");
  }
});

This will probably not cover all your cases. But it should put you on the right track.

If I didn't read it correct and what you actually want to do is put an <img> inside a <textarea> then, the first problem I spot is that you are trying to put an <img> tag inside a <textarea>, which is not allowed. Take a look here HTML : Is there any way to show images in a textarea? which handles that question.

AngularJS: select alt value and text from img tag in a textarea content

1 Answers1