HTML Change Within Jquery Textarea Value

Question

I want to extract html codes from a textarea value but failed.

I want to detect and replace images with textarea value.

Below is an example of what I want to do.

TEXTAREA


<textarea class="editor"><img src="x1"><img src="x2"></textarea>

The code below is an example of what I want to do, I know it's wrong.


var editor_images = $('.editor').val().find('img');

editor_images.each(function(key, value) {

  $(this).attr('src','example');

});

Your question is not clear. Is your HTML sample the starting point or the ending point? Are you trying to extract `` tags from a ``? What exactly do you want to do with them? Please [edit your question](https://stackoverflow.com/posts/71820959/edit) to more completely describe what you are trying to accomplish. — kmoser, Apr 10 '22 at 22:17
@kmoser I want to loop the pictures with the value and change the src parameter. Then I will update the textarea value to its final state. — Riga, Apr 10 '22 at 22:19
So you want to update the `src` attributes of all the `` tags in the ``? — kmoser, Apr 10 '22 at 22:20
@kmoser Yes, But I can't manipulate the value of the textarea like an html element. For example, I cannot use the find() method. — Riga, Apr 10 '22 at 22:23
The value of a `` is a string of HTML, not DOM node objects. You can use jQuery's `$.parseHTML()` to create a set of DOM nodes. See my answer for more details. — kmoser, Apr 11 '22 at 03:50

score 0 · Answer 1 · answered Apr 11 '22 at 00:30

If you want to replace multiple attributes or tags, then your question may be too broad. However, the example below gives you an idea of how to replace an image attribute within the textarea:

function replaceValueOfTextArea(searchAttr, replaceAttr, value) {
  const editor = document.querySelector('.editor');
  const imgs = editor.value.match(/<img[a-zA-Z0-9="' ]+>/g);

  let textAreaNewValue = '';
  for (let img of imgs) {
    const regMatch = new RegExp(`(?<!img)${searchAttr}`, "gi");
    const match = img.match(regMatch);
    if (match) {
      const regAttr = new RegExp(`${searchAttr}=["|'][^"|']+["|']`, "gi");
      textAreaNewValue += img.replace(regAttr, `${replaceAttr}="${value}"`);
      
    } else {
      textAreaNewValue += img;
    }
  }
  
  editor.value = String(textAreaNewValue);
}

replaceValueOfTextArea('src', 'src', 'https://example.com');

<textarea class="editor"><img src="x1"><img alt="x2"></textarea>

Yes, it works. I provided a solution in a different way, cloned the textarea value to a hidden div, then changed it and processed it back to the textarea value. What I'm wondering is, why can't we use the values like an html tag when processing with jquery? Example: $('.textarea').val().find('img'); — Riga, Apr 11 '22 at 02:29

score 0 · Answer 2 · answered Apr 11 '22 at 03:49

You can use jQuery's $.parseHTML() to parse an HTML string into DOM nodes. Then you can use this method to turn them back into HTML before reinserting them in your <textarea>:

// Get contents of editor as HTML and parse into individual <img> nodes:
let nodes = $.parseHTML( $('.editor').val() )

// Map through <img> nodes and change src attribute, and return as HTML text:
let html = nodes.map(function(node){
    $(node).attr('src', 'example')
    return $('<div>').append($(node).clone()).html(); 
})

// Insert HTML text back into editor:
$('.editor').html( html.join('') )

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<textarea class="editor"><img src="x1"><img src="x2"></textarea>

HTML Change Within Jquery Textarea Value

2 Answers2