function cleanHtmlText(htmlText) {
// 删除 HTML 标签中的多余空格、换行和缩进
var cleanHtml = htmlText.replace(/\s{2,}/g, ' ').replace(/[\r\n]/g, '').replace(/\>(\s+)/g, '>').replace(/(\s+)\</g, '<');
// 删除不必要的标签
var tmp = document.createElement('DIV');
tmp.innerHTML = cleanHtml;
var whitelist = {
'a': ['href', 'target'],
'img': ['src'],
'del': [],
'br': []
// 在这里添加需要保留的标签及其属性
};
var nodes = tmp.querySelectorAll('*');
for (var i = 0, l = nodes.length; i < l; i++) {
var node = nodes[i], name = node.nodeName.toLowerCase();
if (whitelist.hasOwnProperty(name)) {
for (var j = 0, attrs = node.attributes, len = attrs.length; j < len; j++) {
var attr = attrs[j];
if (whitelist[name].indexOf(attr.name) === -1) {
node.removeAttributeNode(attr);
j--;
len--;
}
}
} else {
node.parentNode.removeChild(node);
i--;
l--;
}
}
// 返回干净的 HTML 文本
return tmp.innerHTML;
}
上述函数接受一个 HTML 文本字符串作为参数，返回一个处理后的干净 HTML 文本字符串。函数的操作步骤如下：
-
首先使用正则表达式将 HTML 代码中的多余空格、换行和缩进删除，使之保留节点间的必要空格。
var cleanHtml = htmlText.replace(/\s{2,}/g, ' ').replace(/[\r\n]/g, '').replace(/\>(\s+)/g, '>').replace(/(\s+)\</g, '<');
-
接着使用 DOM API 将 HTML 字符串转换为 DOM 元素并存储在变量 tmp 中。
var tmp = document.createElement('DIV');
tmp.innerHTML = cleanHtml;
-
再使用一个白名单对象 whitelist，存储需要保留的标签及其属性。
var whitelist = {
'a': ['href', 'target'],
'img': ['src'],
'del': [],
'br': []
// 在这里添加需要保留的标签及其属性
};
-
依次遍历 DOM 元素树，对于每一个节点，如果它的标签名不在 whitelist 中，则将其从父节点中删除。如果它的标签名在 whitelist 中，则遍历其所有属性，去除未包含在 whitelist[name] 中的属性。
var nodes = tmp.querySelectorAll('*');
for (var i = 0, l = nodes.length; i < l; i++) {
var node = nodes[i], name = node.nodeName.toLowerCase();
if (whitelist.hasOwnProperty(name)) {
for (var j = 0, attrs = node.attributes, len = attrs.length; j < len; j++) {
var attr = attrs[j];
if (whitelist[name].indexOf(attr.name) === -1) {
node.removeAttributeNode(attr);
j--;
len--;
}
}
} else {
node.parentNode.removeChild(node);
i--;
l--;
}
}
-
最后将处理后的 HTML 文本字符串输出。
return tmp.innerHTML;
获取字符串的长度我们可以使用字符串的 length 属性来获取字符串的长度，就像这样：const str = "hello";const len = str.length; // len 的值为 5使用 substring 方法删除最后一个字符串有了字符串的长度，我们就可以使用 substring 方法来删除最后一个字符了。具体步骤如下：获取字符串的长度 len；使用 substring 方法从索引 0 开始，取到索引为 len-1 的子串，也就是删除最后一个字符；将删除最后一个字符后的...
日期：2023-04-18 22:30:53
浏览：596
function cleanHtmlText(htmlText) { // 删除 HTML 标签中的多余空格、换行和缩进 var cleanHtml = htmlText.replace(/\s{2,}/g, ' ').replace(/[\r\n]/g, '').replace(/\>(\s+)/g, '>').replace(/(\s+)\</g, '<'); // 删除不必要的标签 var tmp = document.createElement('DIV'); tm...
日期：2023-04-18 22:36:08
浏览：605
首先，我们需要把修改网页标题和让它闪动这两个功能独立出来。在函数内部，我们定义了三个变量：pageTitle是当前网页的原始标题，isPageActive表示当前页面是否处于活跃状态（即用户正在当前页面），flashInterval则是用于控制标题闪动的定时器。在函数内部，我们定义了一个flash函数，它根据isPageActive变量的值，交替显示原始标题和要闪动的标题。然后，我们监听了页面的聚焦和失焦事件。如果页面失焦（即用户把当前页面切换到了其他页面或其他应用程序），则设置isPageActive为t...
日期：2023-04-18 22:39:34
浏览：634
首先要在HTML中放置一个按钮和一个用于展示图片的标签，如下所示：<input type="file" id="fileInput"><img id="preview"><button type="button" onclick="convertToIco()">转换成ICO</button>其中，input标签用于选择图片文件，img标签用于预览图片，butt...
日期：2023-04-18 22:43:25
浏览：564
function getCurrentDate() { // 创建一个Date对象，自动获取当前日期和时间 const currentDate = new Date(); // 分别获取年、月、日信息 const year = currentDate.getFullYear(); const month = currentDate.getMonth() + 1; // 月份从0开始，所以要加1 const date = currentDate.getDate(); // 拼接成指定格式（这...
日期：2023-04-19 15:05:35
浏览：704
可以使用以下代码在控制台中获取console.log()打印的内容：// 通过重定向console.log()来获取打印的内容let consoleLog = console.log;console.log = function () { // 将参数转换成数组 let args = Array.prototype.slice.call(arguments); // 将日志记录到数组中 console.log.history = console.log.history || []; console...
日期：2023-04-24 16:42:37
浏览：875
创建HTML页面，包含一个按钮和一个空的div用来展示所选图片：<!DOCTYPE html><html><head> <title>选择图片并预览</title></head><body> <input type="file" id="fileInput"> <div id="preview"></div> <script...
日期：2023-04-24 16:45:13
浏览：741
function changeTitle(title) { // 首先将网页标题改为参数中传入的标题 document.title = title; // 定义一个计数器，用来记录闪动次数 let count = 0; // 定义一个定时器，每500毫秒执行一次 // 该定时器的作用是让标题在原始状态和闪烁状态之间切换 const timerId = setInterval(() => { // 如果计数器为偶数，则将标题设置回原来的值 if (count % 2 === 0...
日期：2023-04-24 16:47:09
浏览：555
下面是一种使用正则表达式删除 HTML 多余空行的方法，可以将其封装为函数，接收参数为包含 HTML 代码的文本。以下是代码示例：function removeHtmlEmptyLines(html) { // 使用正则表达式替换多余的换行符 const cleanedHtml = html.replace(/[\r\n]+/g, '\n'); // 将替换后的 HTML 代码作为 DOM 元素插入到一个临时的 div 中 const tempDiv = document.createElement...
日期：2023-04-24 16:51:36
浏览：778
function loadScript(url, callback) { // 创建script标签 var script = document.createElement('script'); // 设置src属性 script.src = url; // 设置async属性为true，表示异步加载 script.async = true; // 添加onload事件处理函数 script.onload = function() { // 如果有回调函数，则执行回调 if (t...
日期：2023-04-25 09:15:12
浏览：724
