Làm thế nào để thay đổi các thuộc tính HTML trong một chuỗi thô bằng Jquery hoặc Javascript?

Tôi muốn lấy một loạt thẻ anchor và đảm bảo rằng tất cả chúng đều mở trong một tab mới.

Tôi biết tôi nên làm một cái gì đó như thế này $ ('a').attr('target', '_blank'); nhưng điều khó khăn là HTML mà tôi đang cố gắng sửa đổi nằm trong một biến chuỗi.

Xem ví dụ:

Tôi có một đống HTML thô trong một chuỗi như thế này:

var rawHTML = 'Hello there, <a href="http://www.google.com">this</a> is a link.'

Làm thế nào tôi có thể chuyển đổi điều đó để trở thành một cái gì đó như thế này:

processedHTML = 'Hello there, <a href="http://www.google.com" target="_blank">this</a> is a link.'

Câu trả lời #1

Sử dụng jQuery bạn có thể thêm chuỗi vào một phần tử bên ngoài DOM

Bạn sau đó có thể sử dụng các phương thức jQuery trên phần tử mới này để chỉnh sửa html và sau đó trả về chuỗi đã chỉnh sửa:

var rawHTML = 'Hello there, <a href="http://www.google.com">this</a> is a link.';
// create element and set string as it's content
var $div = $('<div>').html(rawHTML);
// modify attributes
$div.find('a').attr('target', '_blank');
// return modified content to string
var processedHTML = $div.html();

Câu trả lời #2

Trong JavaScript thuần túy, chúng ta có thể làm điều này bằng cách sử dụng các phương thức document.createElement, Element.getElementsByTagName và Element.setAttribute, cũng như thuộc tính getter & setter Element.innerHTML.

Lưu ý rằng Element.getElementsByTagName trả về một HTMLCollection sống, đó là lý do tại sao chúng ta có thể khởi tạo đối tượng links trước khi chèn chuỗi html. Để lặp qua bộ sưu tập, chúng ta gọi một phương thức mảng với bộ sưu tập làm ngữ cảnh this.

Điều này giảm bớt một số chi phí quản lý của jQuery.

function blankify (html) {
  var root = document.createElement('span'),
      links = root.getElementsByTagName('a');
  
  root.innerHTML = html;
  
  Array.prototype.forEach.call(links, function (e) {
    e.setAttribute('target', '_blank');
  });
  
  return root.innerHTML;
}

console.log(blankify('Hello there, <a href="http://www.google.com">this</a> is a link.'));

Và chỉ vì vậy, đây là một phương thức jQuery khá linh hoạt. Hoạt động trên DOM, và có thể nối chuỗi.

jQuery.prototype.blankify = function () {
  return this.find('a').attr('target', '_blank'), this;
};

console.log($('<span/>', {
  html: 'Hello there, <a href="http://www.google.com">this</a> is a link.'
}).blankify().html());

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>