【前端】解析HTML并处理特殊符号：前端封装的实用工具函数

水深无声 2023-10-11 20:53 26阅读 0赞

**目录**

一、前言

二、解析HTML

三、处理获得dom元素内容

四、处理特殊符号

五、结合应用

六、工具函数说明

1、DOMParser

2、innerHTML

3、textContent

4、createElement、document.createTextNode

七、使用场景

八、常见HTML特殊字符编码对照表

九、注意事项

十、总结

--------------------

## 一、前言 ##

&emsp;&emsp;在前端开发中，经常会遇到需要解析HTML文本并处理特殊符号的情况，例如在展示富文本内容或处理用户输入。

&emsp;&emsp;为了提高开发效率和代码质量，我们可以封装一些实用的工具函数来处理这些需求。

&emsp;&emsp;本文将为您介绍如何使用前端技术，编写一些高效的工具函数来解析HTML并处理特殊符号。

## 二、解析HTML ##

&emsp;&emsp; 首先，我们需要一个工具函数来解析HTML文本，并将其转换为DOM节点，以便我们能够对其中的内容进行操作。

// 解析HTML
    export const analysis = function (str) {
        if (!str) {
            return ''
        }
        // 处理标签
        let text = replaceTag(str);
        // 处理特殊字符
        text = stripscript(text);
        // 处理回车符,反斜杠
        text = stripscript1(text);
        return text;
    }

使用上述函数，您可以将HTML字符串转换为DOM节点，然后通过DOM操作来处理其中的内容。

## 三、处理获得dom元素内容 ##

// 处理获取dom元素内容
    export const handleText = function (el) {
        try {
            if (!el.innerText) {
                return ""
            }
            let text = ""
            const innerText = el.innerText
            const innerHtml = el.innerHtml
            if(innerText){
                text = analysis(innerText);
            } else if(innerHtml) {
                text = analysis(innerHtml);
            }
            return text;
        } catch (error) {
            console.log("error", error)
            return ""
        }
    }

## 四、处理特殊符号 ##

&emsp;&emsp;当处理HTML内容时，经常会遇到需要转义或还原特殊符号的情况，以避免XSS攻击或显示问题。下面是两个实用的工具函数，用于转义和还原HTML中的特殊字符：

// 处理标签
 function replaceTag(str) {
 return str.replace(/<.*?>/g, "");
 
 }
 // 处理特殊字符
 function stripscript(s) {
 var pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）——|{}【】‘；：”“'。，、？]")
 var rs = "";
 for (var i = 0; i < s.length; i++) {
 rs = rs + s.substr(i, 1).replace(pattern, '');
 }
 return rs;
 }
 // 处理特殊字符（回车符和反斜杠）
 function stripscript1(str) {
 
 return str.replace(/(\n|\r|\r\n|↵)/g, '')
 }

## 五、结合应用 ##

现在，让我们结合这些工具函数，来展示如何在实际开发中使用它们：

// 假设有一个包含HTML内容的字符串
 const htmlString = 'Hello, <world>!';
 
 // 解析HTML并处理特殊字符
 const parsedContent = parseHTML(htmlString);
 const unescapedText = unescapeHTML(parsedContent.innerHTML);
 
 // 将处理后的内容展示在页面上
 const resultElement = document.getElementById('result');
 resultElement.innerHTML = unescapedText;

## 六、工具函数说明 ##

在前端开发中，解析HTML的工具函数可以用于处理和操作HTML字符串。这些函数可以解析HTML，提取其中的元素、属性等，或者将HTML转换为其他格式，例如文本或DOM对象。以下是一些常用的解析HTML的工具函数的说明：

### `1、DOMParser` ###

这是一个浏览器提供的内置对象，用于解析HTML字符串并返回DOM对象。可以通过创建一个新的`DOMParser`实例并调用其`parseFromString`方法来解析HTML字符串。

const parser = new DOMParser(); 
    
    const doc = parser.parseFromString(htmlString, "text/html");

在上面的代码中，`htmlString`是要解析的HTML字符串，`"text/html"`是解析的MIME类型。`parseFromString`方法返回一个表示HTML文档的`Document`对象。

### `2、innerHTML` ###

这是一个用于读取或设置元素内部HTML内容的属性。可以使用该属性来获取或设置元素内部的HTML字符串。

const element = document.getElementById("myElement"); 
 const innerHTML = element.innerHTML; // 获取内部HTML 
 element.innerHTML = "New content"; // 设置内部HTML

### `3、textContent` ###

这是一个用于获取元素及其子元素的文本内容的属性。与`innerHTML`不同，`textContent`获取的是元素的文本内容，不包括HTML标签。

const element = document.getElementById("myElement"); 
    const textContent = element.textContent; // 获取文本内容

### `4、createElement、``document.createTextNode` ###

这两个方法用于创建新的DOM元素和文本节点。可以使用`createElement`方法创建一个新的元素，并使用`document.createTextNode`方法创建文本节点。

const element = document.createElement("p"); // 创建元素 
 const textNode = document.createTextNode("Hello, world!"); // 创建文本节点 
 element.appendChild(textNode); // 将文本节点添加到元素中

> 这些工具函数可以用于各种前端开发任务，例如动态修改页面内容、提取页面中的特定信息、处理用户输入等。根据具体的需求选择适合的工具函数进行操作。

## 七、使用场景 ##

> HTML是一种用于创建网页的标准标记语言。它被广泛应用于各种互联网和移动互联网应用中，是网页设计和开发的基础。以下是一些HTML的使用场景：

1.  静态网页：HTML可以用来描述网页的结构和内容，包括标题、段落、列表、表格、图像等。这些元素在网页中起着不同的作用，共同构成了网页的基础信息呈现方式。
2.  动态网页：HTML通常与其他编程语言（如JavaScript、PHP等）结合使用，实现动态交互功能。例如，当用户提交表单时，HTML负责创建和呈现表单，而JavaScript负责处理用户输入和更新网页内容。
3.  响应式网页：为了适应不同设备的屏幕尺寸和分辨率，HTML与CSS和JavaScript等技术结合，实现网页的自适应布局。这样，网页可以在各种设备（如台式机、笔记本、平板和手机）上以最佳的方式呈现。
4.  链接导航：HTML中的超链接允许用户从一个页面跳转到另一个页面，或者在同一页面内跳转。这对于网站导航和用户引导至关重要，使浏览者能够方便地在不同页面之间跳转。
5.  在前端开发中，当需要从HTML中提取纯文本内容时，可以使用这些工具函数。
6.  当用户输入文本内容，需要过滤掉特殊字符和HTML标签时，这些函数也会派上用场。

> 总的来说，HTML是现代网页制作的基础，无论是静态网页还是动态网页，都需要使用HTML来描述网页的结构和内容。随着移动互联网的发展，响应式网页也越来越受到重视，HTML在这一领域的应用也越来越广泛。

## 八、常见HTML特殊字符编码对照表 ##

![60d3fed12a764558a52775d6fb03f0bc.png][]

## 九、注意事项 ##

*  工具函数适用于简单的HTML文本处理，对于复杂的文档结构可能需要额外的逻辑。
 *  需要根据实际项目需求和安全性考虑，以防止潜在的安全问题。
 *  一个网页中只含有一个h1标签，用来放置网站的重要logo。
 *  在HTML中最好不要修改样式，因为HTML主要是告诉浏览器语义，而不是起到修饰作用。
 *  不推荐使用br、hr之类的标签，因为它们没有语义，可以用CSS中的border等属性来设置。
 *  对于img标签，一般只指定width或height中的一个属性，以避免图像变形。
 *  引用路径应该使用相对路径，以提高可移植性。
 *  尽量使用CSS雪碧图，以降低服务器压力，减少请求次数。
 *  对于图片多的网页，图片可以以webp格式上传，以减小文件体积。
 *  在盒子模型中，应以文字左边的内边距为准，右边可能有误差，而顶部要减去文字行高。
 *  网页制作步骤包括：设定字体（2）重置所有默认样式和设置一些全局样式（3）从上至下，由外而内编写（4）重点的注释不要忘记。
 *  id属性用于大结构、外围、js使用，class用于小结构、内部使用。
 *  如果CSS样式没有反应，可以尝试在HTML中直接编写！或～符号，然后用空格选择器选择要操作的元素看看有没有样式被覆盖。

## 十、总结 ##

通过封装解析HTML和处理特殊符号的工具函数，我们可以在前端开发中更加方便地处理富文本内容，避免安全问题，同时提高代码的可维护性和可读性。

这些实用的工具函数为我们的开发工作提供了强大的支持，让我们能够更专注地实现功能而不必过多纠结于细节。希望本文能够帮助您更加高效地开发前端应用！

[60d3fed12a764558a52775d6fb03f0bc.png]: https://img-blog.csdnimg.cn/60d3fed12a764558a52775d6fb03f0bc.png