Question

单击按钮时，我将从textarea提取用户输入数据。如果用户在文本区域内放置了一些超链接代码，则该功能会自动识别并添加rel=nofollow。现在，我需要在textarea中再次分配这些新的超链接代码，并替换旧的超链接代码。

我能够添加rel=nofollow并发出警报

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>

Answer 1

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

Answer 2

使用XMLSerializer界面将DOMParser实例转换为HTML字符串，然后通过HTML字符串影响<textarea>的value属性。

如果只想拥有<body>标签的内容，则需要执行一些其他处理。

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>

Answer 3

请尝试以下操作，

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>

在JavaScript中分配值

3 个答案: