JS 过滤文本 - Javascript

在前后端开发中，我们通常需要从用户提交的表单或其他输入数据中过滤掉一些恶意或不合法的字符。使用 Javascript，我们可以轻松地实现这些过滤操作。下面我们将介绍如何使用常用的 Javascript 函数来过滤文本。

1. 去除空格

JavaScript 提供了 trim() 函数来去除字符串中的所有空格。

const str = "   hello world   ";
const trimmedStr = str.trim(); // "hello world"

2. 过滤特定字符

我们可以使用 replace() 函数来过滤字符串中的特定字符，它有两个参数：要替换的字符或正则表达式，和要替换成的新字符串。

例如，要过滤字符串中所有的空格，我们可以使用：

const str = "   hello world   ";
const filteredStr = str.replace(/ /g, ""); // "helloworld"

这里的 / /g 表示一个正则表达式，它会匹配所有的空格，并将其替换成空字符串。

3. 过滤 HTML 标签

要过滤字符串中的 HTML 标签，我们可以使用 replace() 函数和一个正则表达式，它会匹配所有的标签并将其替换成空字符串。

const html = "<p>Hello <strong>world</strong>!</p>";
const filteredHtml = html.replace(/<[^>]+>/g, ""); // "Hello world!"

这里的正则表达式 <[^>]+> 匹配所有的 HTML 标签，其中 [^>] 表示任何非 '>' 的字符，+ 表示匹配一个或多个。

4. URL 编码

要将字符串中的 URL 编码，我们可以使用 encodeURIComponent() 函数。

const url = "https://www.example.com/search?q=hello world";
const encodedUrl = encodeURIComponent(url);
// "https%3A%2F%2Fwww.example.com%2Fsearch%3Fq%3Dhello%20world"

5. HTML 转义

如果想要将字符串中的所有 HTML 实体转义（例如 < 转成 <），可以使用 escape() 函数。但是请注意，该函数已经废弃不建议使用。

const html = "<p>Hello <strong>world</strong>!</p>";
const escapedHtml = escape(html); // "%3Cp%3EHello%20%3Cstrong%3Eworld%3C%2Fstrong%3E!%3C%2Fp%3E"

更好的方式是使用 DOM 中的 createElement() 和 innerHTML 属性来创建一个临时元素并获取其转义后的内容。

const html = "<p>Hello <strong>world</strong>!</p>";
const tempEl = document.createElement('div');
tempEl.textContent = html;
const escapedHtml = tempEl.innerHTML; // "&lt;p&gt;Hello &lt;strong&gt;world&lt;/strong&gt;!&lt;/p&gt;"

结论

在 Javascript 中过滤文本是一项常见的任务，我们介绍了几个常用的函数来去除空格、过滤特定字符、过滤 HTML 标签、URL 编码以及 HTML 转义。这些函数对于前后端开发中的输入验证和安全性很重要，同时也可以用来格式化和修理文本数据。