当前位置：首页 > news >正文

在JavaScript中，将包含HTML实体字符的字符串转换为普通字符

news 2025/11/6 16:48:51

在JavaScript中，将包含HTML实体字符的字符串转换为普通字符有几种方法：

1. 使用 DOMParser（推荐）

function decodeHTMLEntities(text) {const textArea = document.createElement('textarea');textArea.innerHTML = text;return textArea.value;
}// 或者使用 DOMParser
function decodeHTMLEntities(text) {const doc = new DOMParser().parseFromString(text, 'text/html');return doc.documentElement.textContent;
}// 示例
const encodedString = "Hello &amp; Welcome &lt;world&gt;";
const decodedString = decodeHTMLEntities(encodedString);
console.log(decodedString); // "Hello & Welcome <world>"

2. 使用 textarea 元素

function decodeHTMLEntities(text) {const textarea = document.createElement('textarea');textarea.innerHTML = text;return textarea.value;
}// 示例
const result = decodeHTMLEntities("John &amp; Jane &copy; 2023");
console.log(result); // "John & Jane © 2023"

3. 使用正则表达式替换（适用于常见实体）

function decodeHTMLEntities(text) {const entities = {'&amp;': '&','&lt;': '<','&gt;': '>','&quot;': '"','&#39;': "'",'&nbsp;': ' ','&copy;': '©','&reg;': '®'};return text.replace(/&[a-z]+;/g, match => {return entities[match] || match;});
}// 示例
const result = decodeHTMLEntities("Price &lt; $100 &amp; free shipping");
console.log(result); // "Price < $100 & free shipping"

4. 处理数字实体

function decodeHTMLEntities(text) {return text.replace(/&#(\d+);/g, (match, dec) => {return String.fromCharCode(dec);}).replace(/&#x([0-9a-f]+);/gi, (match, hex) => {return String.fromCharCode(parseInt(hex, 16));});
}// 示例
const result = decodeHTMLEntities("A&#65; B&#x42;");
console.log(result); // "AA BB"

5. 完整的解决方案

function decodeHTMLEntities(text) {// 创建临时元素const textArea = document.createElement('textarea');textArea.innerHTML = text;// 处理数字实体（如果需要）let decoded = textArea.value;decoded = decoded.replace(/&#(\d+);/g, (match, dec) => {return String.fromCharCode(dec);});return decoded;
}// 或者使用更简单的方法
function decodeHTMLEntities(text) {const element = document.createElement('div');element.innerHTML = text;return element.textContent || element.innerText || '';
}

使用示例

// 测试各种HTML实体
const testCases = ["Hello &amp; World","Price &lt; $100 &gt; $50","&quot;Quote&quot; and &#39;apos&#39;","Copyright &copy; 2023","Spaces&nbsp;&nbsp;&nbsp;here","A&#65; B&#x42; C&#67;"
];testCases.forEach(test => {console.log(`原始: ${test}`);console.log(`解码: ${decodeHTMLEntities(test)}`);console.log('---');
});