如何將字符串轉換為HTML

在網頁開發中，我們經常需要將字符串轉化為HTML。這篇文章將介紹如何使用不同的方法完成這一任務。

一、字符串轉HTML字符

首先，我們需要將一些特殊字符轉換為其對應的HTML實體，以防止它們被瀏覽器解釋為標籤。例如：

function htmlEscape(str) {
  return str.replace(/[&"']/g, function(match) {
    switch (match) {
      case '&':
        return '&';
      case '':
        return '>';
      case '"':
        return '"';
      case "'":
        return ''';
      default:
        return match;
    }
  });
}

上述函數中使用了正則表達式來匹配需要轉換的字符，並用switch語句將其轉換為HTML實體。

二、字符串轉HTML標籤

如果我們想要將一個字符串轉換為HTML標籤，可以使用innerHTML屬性。

var str = '<p>Hello, World!</p>';
var div = document.createElement('div');
div.innerHTML = str;

這裡我們創建了一個div元素，並將包含HTML標籤的字符串放入其innerHTML屬性中。此時，div元素的內容已經被渲染成為一個p標籤。

三、字符串轉HTML代碼

如果我們需要在頁面中嵌入一段JavaScript代碼，可以將其轉換為script標籤，然後將其插入到HTML文檔中。例如：

var str = 'alert("Hello, World!");';
var script = document.createElement('script');
script.type = 'text/javascript';
script.textContent = str;
document.body.appendChild(script);

上述代碼中，我們創建了一個包含JavaScript代碼的字符串，並將其賦值給script標籤的textContent屬性。然後將該標籤插入到頁面中，這樣JavaScript代碼就能夠被執行。

四、字符串轉HTML對象

通過將一個字符串轉換為HTML對象，我們可以在頁面中創建HTML元素。例如：

var str = '<p>Hello, World!</p>';
var parser = new DOMParser();
var doc = parser.parseFromString(str, 'text/html');
var p = doc.body.firstChild;
document.body.appendChild(p);

這裡我們創建了一個包含HTML標籤的字符串，並使用DOMParser將其轉換為HTML文檔對象。然後我們通過獲取該文檔的body元素的第一個子元素，即我們剛才創建的p標籤，然後將它插入到頁面中。

五、字符串轉HTML元素

如果我們想要將一個字符串轉換為一個HTML元素，並將其添加到頁面中，可以使用createElement方法。例如：

var str = 'Hello, World!';
var p = document.createElement('p');
p.textContent = str;
document.body.appendChild(p);

這裡我們創建了一個p標籤並將其添加到body元素中，然後將字符串賦值給p標籤的textContent屬性，使其生成一個文本節點。

六、字符串轉HTML格式

如果我們想要在頁面中展示一段預先格式化好的HTML文本，可以使用pre標籤來顯示。例如：

var str = '<pre><code>function sayHello() {\n  console.log("Hello, World!");\n}</code></pre>';
var div = document.createElement('div');
div.innerHTML = str;
document.body.appendChild(div);

這裡我們創建了一個包含預先格式化好的HTML文本的字符串，並將其放入一個div元素中。該元素的內容將以pre格式進行展示。

七、字符串轉HTML

如果我們需要將一個字符串中包含的所有HTML標籤都轉換為真正的HTML元素，可以使用jQuery庫或其他類似工具來完成。例如：

var str = '<p>Hello, World!</p>';
var div = jQuery('<div>' + str + '</div>');
document.body.appendChild(div[0]);

這裡我們將字符串放入一個div元素中，然後使用jQuery庫將該元素的內容轉換為真正的HTML標籤，並將其插入到頁面中。

八、字符串轉集合

如果我們想要將一個包含多個HTML標籤的字符串轉換為一個元素集合，可以使用jQuery庫的parseHTML方法。例如：

var str = '<p>Hello, <strong>World</strong>!</p><br>';
var els = jQuery.parseHTML(str);
els.forEach(function(el) {
  document.body.appendChild(el);
});

這裡我們使用jQuery庫的parseHTML方法將字符串轉換為一個元素集合，然後使用forEach方法將每個元素依次插入到頁面中。

九、字符串轉譯

如果我們想要將一個包含轉義字符的字符串轉換為HTML，可以使用DOMParser提供的parseFromString方法，像這樣：

var str = '<p>Hello, World!</p>';
var doc = new DOMParser().parseFromString(str, 'text/html');
var div = document.createElement('div');
div.textContent = doc.body.textContent;
document.body.appendChild(div);

這裡我們先將字符串轉換為一個HTML文檔，然後將文檔的內容提取出來放入一個div元素中，再將該元素插入到頁面中。

十、字符串轉換為整數

如果我們需要將字符串轉化為整數類型，我們可以使用parseInt方法。

var str = '123';
var num = parseInt(str);

上述代碼中，將字符串 ‘123’ 轉換為整數類型並存入變量 num 中。