轉義html標簽，除了很少的給定標簽

Question

這是我用來轉義html標簽的代碼：

var ne = document.createElement('textarea');
ne.appendChild(document.createTextNode(str));
return ne.innerHTML;

我不想轉義<strong></strong> <i></i>標簽

eg <h1>sasasas<strong>hello</strong></h1>應該是&lt;h1&gt;sasasas<strong>hello</strong>&lt;/h1&gt;

我怎樣才能做到這一點？

Answer 1

var ne = document.createElement('textarea'),
    str = '<h1>sasasas<strong>hello</strong></h1>';
var newstr = str.replace(/(<\/?(\w+)>)/g, function(m0, m1, m2) {
  if (m2 != 'strong' && m2 != 'i')
      return m0.replace(/</g, '&lt;')
               .replace(/>/g, '&gt;');
  else
      return m0;
});
ne.appendChild(document.createTextNode(newstr));
return ne.innerHTML;

它適用於簡單標簽（無屬性-我不知道您的文本來源）。 或者，正如評論中所說的那樣：

var ne = document.createElement('textarea'),
    str = '<h1>sasasas<strong>hello</strong></h1>';
var newstr = str.replace(/(<(\/?(strong|i))>)/gi, 'BRA$2KET')
                .replace(/</g, '&lt;')
                .replace(/>/g, '&gt;')
                .replace(/(BRA(\/?(strong|i))KET)/gi, '<$2>');
ne.appendChild(document.createTextNode(newstr));
return ne.innerHTML;

或者，最好的方法就是恢復轉義的標簽

var ne = document.createElement('textarea'),
    str = '<h1>sasasas<strong>hello</strong></h1>';
var newstr = str.replace(/</g, '&lt;')
                .replace(/>/g, '&gt;')
                .replace(/(&lt;(\/?(strong|i))&gt;)/gi, '<$2>');
ne.appendChild(document.createTextNode(newstr));
return ne.innerHTML;