1. 首页
  2. 分类
  3. 前端技术
js 判断字符串是否包含某个字符串
System
2024-08-21
所有,javascript

在 JavaScript 中，判断一个字符串是否包含某个子字符串，可以使用以下不同的实现方法：

  1. 使用includes()方法：使用字符串的includes()方法，它会返回一个布尔值，表示原始字符串是否包含指定的子字符串。示例代码如下：



let str = "Hello, world!";
let substring = "world";
 
if (str.includes(substring)) {
    console.log("字符串包含指定的子字符串");
} else {
    console.log("字符串不包含指定的子字符串");
}
  1. 使用indexOf()方法：使用字符串的indexOf()方法，它返回子字符串在原始字符串中首次出现的索引(如果找到了)。若返回值大于等于0，则表示子字符串存在于原始字符串中。示例代码如下：



let str = "Hello, world!";
let substring = "world";
 
if (str.indexOf(substring) >= 0) {
    console.log("字符串包含指定的子字符串");
} else {
    console.log("字符串不包含指定的子字符串");
}
  1. 使用正则表达式：使用正则表达式来匹配原始字符串中是否存在指定的子字符串。示例代码如下：



let str = "Hello, world!";
let substring = "world";
let regex = new RegExp(substring);
 
if (regex.test(str)) {
    console.log("字符串包含指定的子字符串");
} else {
    console.log("字符串不包含指定的子字符串");
}
- 阅读更多 -
vscode-关闭ts与js语义校验
System
2024-08-21
所有,javascript

在VSCode中，如果你想关闭TypeScript和JavaScript的语义检查，可以通过禁用typescript.validate.enable设置来实现。

你可以按照以下步骤操作：

  1. 打开VSCode设置（快捷键Ctrl + ,或Cmd + ,）。
  2. 在设置搜索栏中输入typescript.validate.enable。
  3. 找到并取消选中TypeScript: Validate Enable设置项。

如果你想通过编辑器配置文件来做这个更改，可以在settings.json中添加以下配置：




"typescript.validate.enable": false

请注意，禁用语义检查可能会导致编辑器不再提供代码错误提示，从而降低开发效率。因此，只有当你确实不需要语义检查时，才应该关闭这个功能。

- 阅读更多 -
JS 比较字符串大小 （ 4种方法 ）
System
2024-08-21
所有,javascript

在JavaScript中，比较两个字符串的大小可以使用以下四种方法：

  1. 使用关系运算符（>，<，>=，<=）
  2. 使用String.prototype.localeCompare()
  3. 使用String.prototype.compare()（不推荐，因为它不是标准方法）
  4. 将字符串转换为数值

下面是每种方法的示例代码：

  1. 使用关系运算符：



let str1 = "apple";
let str2 = "banana";
 
console.log(str1 > str2);  // false
console.log(str1 < str2);  // true
console.log(str1 >= str2); // false
console.log(str1 <= str2); // true
  1. 使用localeCompare()：



let str1 = "apple";
let str2 = "banana";
 
console.log(str1.localeCompare(str2));  // -1
console.log(str2.localeCompare(str1));  // 1
console.log(str1.localeCompare(str1));  // 0
  1. 使用compare()（不推荐）：



let str1 = "apple";
let str2 = "banana";
 
console.log(str1.compare(str2));  // -1
console.log(str2.compare(str1));  // 1
console.log(str1.compare(str1));  // 0
  1. 将字符串转换为数值：



let str1 = "apple";
let str2 = "banana";
 
console.log(str1 > Number(str2));  // false
console.log(str1 < Number(str2));  // true
console.log(str1 >= Number(str2)); // false
console.log(str1 <= Number(str2)); // true

注意：

  • 使用关系运算符时，字符串比较是基于ASCII值的字典顺序。
  • localeCompare()方法考虑了本地语言规则，可能会更复杂。
  • compare()方法不是所有环境中的标准方法，不建议使用。
  • 将字符串转换为数值时，如果字符串不是有效的数字，会转换为NaN，可能会影响比较结果。
- 阅读更多 -
【前端】语法高亮 Prism.js 使用
System
2024-08-21
所有,javascript

Prism.js 是一个轻量级的语法高亮工具，可以帮助开发者在网页上展示代码段并实现语法高亮。以下是如何使用 Prism.js 进行语法高亮的简单示例：

  1. 在 HTML 中引入 Prism.js 库：



<!DOCTYPE html>
<html>
<head>
  <title>Prism.js Example</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/prism.min.js"></script>
  <link href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.23.0/themes/prism-tomorrow.min.css" rel="stylesheet" />
</head>
<body>
 
  <pre><code class="language-javascript">
    // 这是一段 JavaScript 代码
    function helloWorld() {
        console.log('Hello, World!');
    }
    helloWorld();
  </code></pre>
 
</body>
</html>

在上述代码中，我们通过 <script> 标签引入了 Prism.js 的 JavaScript 文件，并通过 <link> 标签引入了相应的主题样式。在 <pre> 和 <code> 标签之间，我们定义了一段需要高亮的代码，并且使用 language-javascript 类来指定代码的语言。

  1. 使用 Prism.js 的 API 进行高亮：

如果你想要在文档加载后手动高亮代码，可以使用 Prism.js 提供的 API。




<script>
  document.addEventListener('DOMContentLoaded', function() {
    Prism.highlightAll(); // 高亮页面内所有代码段
  });
</script>

Prism.highlightAll() 方法会查找页面上所有的 <pre><code> 标签，并尝试根据其中的 language-* 类来应用相应的语法高亮。

确保在调用 Prism.highlightAll() 之前，页面的 DOM 已经完全加载。通常我们会将这段代码放在 DOMContentLoaded 事件的监听器中，或者将脚本放在页面的 <body> 标签的底部。

- 阅读更多 -
js删除cookie
System
2024-08-21
所有,javascript

删除cookie的方法有多种实现方式：

方法一：

  1. 首先，可以使用document.cookie获取所有的cookie信息。
  2. 遍历所有的cookie，使用document.cookie赋值为空字符串，并设置过期时间为过去的某个时间，从而删除该cookie。例如：



function deleteCookie(name) {
  document.cookie = name + '=;expires=Thu, 01 Jan 1970 00:00:00 UTC; path=/;';
}

使用方法：deleteCookie('cookie_name');

方法二：

  1. 可以使用document.cookie获取所有的cookie信息。
  2. 然后，将cookie信息拆分成键值对形式的数组。
  3. 根据要删除的cookie名称，使用Array.filter()方法过滤出不包含该名称的键值对，并重新拼接成字符串。
  4. 将新的cookie字符串赋值给document.cookie，以更新cookie。例如：



function deleteCookie(name) {
  var cookies = document.cookie.split(';');
  var updatedCookies = cookies.filter(function(cookie) {
    return cookie.trim().indexOf(name + '=') !== 0;
  });
  document.cookie = updatedCookies.join(';');
}

使用方法：deleteCookie('cookie_name');

以上是两种常见的删除cookie的方法，在保证功能正确的前提下，提供了不同的实现方式。

- 阅读更多 -
学习使用js监测浏览器窗口大小变化
System
2024-08-21
所有,javascript

在JavaScript中，可以使用window对象的resize事件来监测浏览器窗口的大小变化。以下是一个简单的例子，展示了如何设置一个事件监听器来响应窗口大小的变化，并且输出新的窗口大小。




// 定义一个函数来处理窗口大小变化的事件
function handleResize() {
    // 获取窗口的宽度和高度
    const windowWidth = window.innerWidth || document.documentElement.clientWidth;
    const windowHeight = window.innerHeight || document.documentElement.clientHeight;
 
    // 输出窗口的新大小
    console.log('窗口宽度: ' + windowWidth + ', 窗口高度: ' + windowHeight);
}
 
// 设置事件监听器来监听resize事件
window.addEventListener('resize', handleResize);

当你调整浏览器窗口的大小时，handleResize函数会被触发，并输出新的窗口宽度和高度。这个函数首先尝试使用window.innerWidth和window.innerHeight来获取窗口大小，如果这些属性不可用，则会使用document对象的documentElement.clientWidth和documentElement.clientHeight属性。

- 阅读更多 -
html-docx-js网页转为word格式框架
System
2024-08-21
所有,javascript

html-docx-js是一个JavaScript库，可以将HTML内容转换成Word文档格式（.docx）。以下是使用html-docx-js的基本步骤和示例代码：

  1. 引入html-docx-js库。
  2. 准备要转换的HTML内容。
  3. 使用html-docx-js将HTML转换成Word文档。
  4. 可选择使用file-saver库保存生成的Word文档。

示例代码：




<!DOCTYPE html>
<html>
<head>
    <title>HTML to Word Example</title>
    <script src="https://cdn.jsdelivr.net/npm/html-docx-js/dist/html-docx.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/file-saver@2.0.2/dist/FileSaver.min.js"></script>
</head>
<body>
    <div id="content">
        <h1>Hello World</h1>
        <p>This is an example paragraph.</p>
    </div>
    <button onclick="convertToWord()">Convert to Word</button>
 
    <script>
        function convertToWord() {
            var content = document.getElementById('content').outerHTML;
            var converted = htmlDocx.asBlob(content);
            
            saveAs(converted, 'example.docx');
        }
    </script>
</body>
</html>

在这个示例中，我们定义了一个包含标题和段落的简单HTML内容。有一个按钮用于触发转换过程，它会将HTML内容转换成Word文档，并使用file-saver保存到用户的设备上。

- 阅读更多 -
JS获取本机IP地址的2种方法
System
2024-08-21
所有,javascript

在JavaScript中获取本机IP地址的方法主要有两种：通过WebRTC和通过Node.js。

  1. 使用WebRTC

WebRTC (Web Real-Time Communications) 是一个由W3C推动的项目，它允许在没有任何插件或者第三方软件的情况下，建立浏览器之间的音频、视频和数据分享。




function getUserIP(onNewIP) {
    // 创建一个RTCPeerConnection对象
    let RTCPeerConnection = window.RTCPeerConnection || window.webkitRTCPeerConnection || window.mozRTCPeerConnection;
 
    // 创建一个配置对象
    let rtcConfig = {
        iceServers: []
    };
 
    // 创建一个新的RTCPeerConnection对象
    let pc = new RTCPeerConnection(rtcConfig);
 
    // 创建一个本地的数据流
    let dataChannel = pc.createDataChannel('');
 
    // 当有数据通道打开的时候触发
    pc.onicecandidate = (ice) => {
        if (!ice || !ice.candidate || !ice.candidate.candidate) {
            onNewIP(false);
        } else {
            let ipRegex = /([0-9]{1,3}(\.[0-9]{1,3}){3})/;
            let ipAddress = ipRegex.exec(ice.candidate.candidate)[1];
            onNewIP(ipAddress);
        }
    };
 
    // 创建一个SDP offer以开始交换过程
    pc.createOffer((sdp) => {
        pc.setLocalDescription(sdp);
    }, () => {});
 
    // 使用数据通道来传输数据
    dataChannel.onmessage = (event) => {
        console.log(event.data);
    };
    dataChannel.send('Hello World!');
}
 
// 使用函数
getUserIP(ip => console.log(ip));
  1. 使用Node.js

如果你在浏览器环境中运行JavaScript，那么你不能直接获取本机IP地址。但是，如果你在Node.js环境中，你可以使用os模块来获取本机IP地址。




const os = require('os');
const networkInterfaces = os.networkInterfaces();
 
function getIPAddress() {
    for (const ifaceKey in networkInterfaces) {
        for (const iface of networkInterfaces[ifaceKey]) {
            if ('IPv4' !== iface.family || iface.internal !== false) {
                // skip over internal (i.e. 127.0.0.1) and non-ipv4 addresses
                continue;
            }
            return iface.address;
        }
    }
    throw new Error('No IP address found, and we need to return one');
}
 
console.log('IP Address: ' + getIPAddress());

注意：这些方法在不同的环境和不同的浏览器中可能不起作用，因为它们依赖于特定的API和权限。在某些情况下，出于安全考虑，浏览器可能不允许访问本机IP地址。

- 阅读更多 -
js如何拦截全局Fetch的请求和响应
System
2024-08-21
所有,javascript

在JavaScript中，可以通过重写window.fetch方法来拦截全局的fetch请求和响应。以下是一个简单的示例：




(function() {
    const originalFetch = window.fetch;
 
    window.fetch = function() {
        // 在这里可以添加拦截逻辑，比如修改请求头，拦截响应等
        // 调用原始的fetch方法，并传入参数
        return originalFetch.apply(this, arguments)
            .then(response => {
                // 在这里可以添加处理响应的逻辑
                // 返回修改后的响应对象
                return response;
            });
    };
})();

使用这段代码，你可以在全局范围内拦截所有的fetch请求，并对请求或响应进行必要的处理。记得在代码的适当位置调用这个自执行函数来重写window.fetch方法。

- 阅读更多 -
JavaScript 删除数组中指定元素(5种方法)
System
2024-08-21
所有,javascript



// 方法1: 使用 filter 方法
let arr = [1, 2, 3, 4, 5];
arr = arr.filter(item => item !== 3); // [1, 2, 4, 5]
 
// 方法2: 使用 for 循环和 splice 方法
let arr2 = [1, 2, 3, 4, 5];
for (let i = 0; i < arr2.length; i++) {
  if (arr2[i] === 3) {
    arr2.splice(i, 1);
    i--; // 防止错过一个元素
  }
}
 
// 方法3: 使用 while 循环和 pop 方法
let arr3 = [1, 2, 3, 4, 5];
let index = arr3.indexOf(3);
while (index > -1) {
  arr3.splice(index, 1);
  index = arr3.indexOf(3);
}
 
// 方法4: 使用 reduce 方法
let arr4 = [1, 2, 3, 4, 5];
arr4 = arr4.reduce((acc, val) => {
  return val !== 3 ? acc.concat(val) : acc;
}, []);
 
// 方法5: 使用 map 方法
let arr5 = [1, 2, 3, 4, 5];
arr5 = arr5.map(item => item === 3 ? [] : [item]).flat(); // [1, 2, 4, 5]
- 阅读更多 -
Copyright © 2025 Tech Blog
All Right Reserved | 京ICP备19053165号