Assigning value in JavaScript

Question

I am fetching the user input data from textarea on button click. If a user put some hyperlink code inside textarea, the function automatically recognize and add rel=nofollow. Now I need to assign these new hyperlink code inside textarea again and replace the old one.

I am able to add rel=nofollow and able to alert it

function naming() {
  var rel_attribute = document.getElementById('textareaCode').value;
  var dom = new DOMParser().parseFromString(rel_attribute, 'text/html');
  [...dom.getElementsByTagName('a')].forEach((a) => {
    a.setAttribute('rel', 'nofollow');
    alert(a.outerHTML);
  });
}

<textarea id="textareaCode"></textarea>
<a href="#" onclick="naming()">Execute Function</a>

to clarify, are you just looking to update the textfield value? i.e user enters html in to the textarea, the function updates the text they entered to have the nofollow? — James Lingham
– James Lingham, Commented Jun 17, 2019 at 12:38
I only need to update the value of textarea with rel attribute — Supriya Rani
– Supriya Rani, Commented Jun 17, 2019 at 12:40

User863 · Accepted Answer · 2019-06-17 13:02:03Z

4

Using replace()

function naming() {
  var textarea = document.getElementById('textareaCode');
  var rel_attribute = document.getElementById('textareaCode').value;
  var dom = new DOMParser().parseFromString(rel_attribute, 'text/html');
  [...dom.getElementsByTagName('a')].forEach((a) => {
    let original = a.outerHTML
    a.setAttribute('rel', 'nofollow');
    textarea.value = textarea.value.replace(original, a.outerHTML)
  });
}

<textarea id="textareaCode" cols=70 rows=5>
<a href="#" onclick="naming()">Execute Function</a>
</textarea>
<br/>
<a href="#" onclick="naming()">Execute Function</a>

edited Jun 17, 2019 at 13:02

answered Jun 17, 2019 at 12:40

User863

20.1k3 gold badges20 silver badges45 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kévin Bibollet · Accepted Answer · 2019-06-17 12:41:30Z

1

Use the XMLSerializer interface to convert your DOMParser instance into HTML string, then affect your <textarea>'s value property with the HTML string.

You'll need to do some other processes if you want to only have the <body> tags' content.

function naming() {
  const eArea = document.getElementById('textareaCode'),
    dom = new DOMParser().parseFromString(eArea.value, 'text/html');
  
  [...dom.getElementsByTagName('a')].forEach(a => a.setAttribute('rel', 'nofollow'));
  
  // That's here!
  eArea.value = new XMLSerializer().serializeToString(dom);
}

<textarea id="textareaCode"></textarea>

<a href="#" onclick="naming()">Execute Function</a>

answered Jun 17, 2019 at 12:41

Kévin Bibollet

3,6331 gold badge17 silver badges34 bronze badges

Comments

Manish Khedekar · Accepted Answer · 2019-06-17 12:52:52Z

0

Please try out as follows,

let counter = 1;

function naming() {
  var rel_attribute = document.getElementById('textareaCode').value;

  var anchorTags = document.getElementsByTagName('a');

  var dom = new DOMParser().parseFromString(rel_attribute, 'text/html');
  [...dom.getElementsByTagName('a')].forEach((a) => {
    a.setAttribute('rel', 'nofollow');
    
    a.onclick = naming;
    a.innerText = "Manish " + counter++;
    
    for(let i=0; i < anchorTags.length; i++){
      anchorTags[i].remove();
    }
    
    document.body.appendChild(a);

    console.log(anchorTags);
  });
}

<textarea id="textareaCode"></textarea>
<a href="#" onclick="naming()">Execute Function</a>

answered Jun 17, 2019 at 12:52

Manish Khedekar

4024 silver badges13 bronze badges

Collectives™ on Stack Overflow

Assigning value in JavaScript

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related