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

目录

一、前言

二、解析HTML

三、处理获得dom元素内容

四、处理特殊符号

五、结合应用

六、工具函数说明

1、DOMParser

2、innerHTML

3、textContent

4、createElement、document.createTextNode

七、使用场景

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

九、注意事项

十、总结

---

一、前言

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

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

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

二、解析HTML

   首先，我们需要一个工具函数来解析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 ""
    }
}

四、处理特殊符号

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

// 处理标签
function replaceTag(str) {
    return str.replace(/<.*?>/g, "");

}
// 处理特殊字符
function stripscript(s) {
    var pattern = new RegExp("[`~!@#$^&*()=|{}':;',\\[\\].<>/?~！@#￥……&*（）&mdash;—|{}【】‘；：”“'。，、？]")
    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 = '<p>Hello, &lt;world&gt;!</p>';

// 解析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 = "<p>New content</p>"; // 设置内部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"); // 创建<p>元素 
const textNode = document.createTextNode("Hello, world!"); // 创建文本节点 
element.appendChild(textNode); // 将文本节点添加到<p>元素中

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

七、使用场景

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

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

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

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

九、注意事项

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

十、总结

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

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