Example code for JavaScript filter keywords
This article mainly introduces the JavaScript method of filtering keywords. Has very good reference value. Let’s take a look at it with the editor below
Rendering:
Without further ado, please look at the code ：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
em { font-size: 16px; color: red; }
</style>
</head>
<body>
<p id="cont">习近平哈哈哈周永康嘿嘿嘿中共哟西啪啪啪</p>
<script>
//================================= 可用状态代码 =====================================
// var arr = ['习近平','周永康','中共', '嘿嘿'],
// arrText = arr.join('|'),
// var params = document.querySelector('#cont');
//
// // 替换关键字
// params.innerHTML = params.innerHTML.replace(new RegExp(arrText, "ig"), "<em>$&</em>");
// var arr = [];
// console.log(arr);
//================================= 修改后的代码 =====================================
/**
* 过滤关键字
* @param keyArr 需要过滤的关键字数组
* @param ele 过滤的节点
*/
function filterContent(keyArr, ele) {
/**
* 一个程序的标准准则
* 1. 可用, 可以实现核心的需求
* 2. 健壮, 兼容性处理, 边界处理, 异常处理, 用户输入校验
* 3. 可靠, 任何时候都要有返回值
* 4. 宽容, 对需求宽容, 对调用着宽容, 对维护者宽容
* 5. 精益求精, 可靠的注释...
*/
try {
// 检测是否为 undefined 或者为一个数组，或者数组长度是否大于 1, 这里的返回 -1 只是为了有返回值, 也可以不写
if (keyArr === 'undefined' || !(keyArr instanceof Array) || keyArr.length < 1) return -1;
// 将数组里面的元素以 | 进行合并方便进行正则比较, 如 张三|李四
var arrTxt = keyArr.join('|'),
regObj = new RegExp(arrTxt, 'ig');
// 替换关键字
ele.innerHTML = ele.innerHTML.replace(regObj, "<em>$&</em>");
} catch (e) {
console.log('出错啦~' + e);
}
}
// 调用
var arr = ['习近平','周永康','中共'];
var params = document.querySelector('#cont');
filterContent(arr, params);
</script>
</body>
</html>The above is the detailed content of Example code for JavaScript filter keywords. For more information, please follow other related articles on the PHP Chinese website!
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
How to implement an online speech recognition system using WebSocket and JavaScript
Dec 17, 2023 pm 02:54 PM
How to use WebSocket and JavaScript to implement an online speech recognition system Introduction: With the continuous development of technology, speech recognition technology has become an important part of the field of artificial intelligence. The online speech recognition system based on WebSocket and JavaScript has the characteristics of low latency, real-time and cross-platform, and has become a widely used solution. This article will introduce how to use WebSocket and JavaScript to implement an online speech recognition system.
WebSocket and JavaScript: key technologies for implementing real-time monitoring systems
Dec 17, 2023 pm 05:30 PM
WebSocket and JavaScript: Key technologies for realizing real-time monitoring systems Introduction: With the rapid development of Internet technology, real-time monitoring systems have been widely used in various fields. One of the key technologies to achieve real-time monitoring is the combination of WebSocket and JavaScript. This article will introduce the application of WebSocket and JavaScript in real-time monitoring systems, give code examples, and explain their implementation principles in detail. 1. WebSocket technology
How to use JavaScript and WebSocket to implement a real-time online ordering system
Dec 17, 2023 pm 12:09 PM
Introduction to how to use JavaScript and WebSocket to implement a real-time online ordering system: With the popularity of the Internet and the advancement of technology, more and more restaurants have begun to provide online ordering services. In order to implement a real-time online ordering system, we can use JavaScript and WebSocket technology. WebSocket is a full-duplex communication protocol based on the TCP protocol, which can realize real-time two-way communication between the client and the server. In the real-time online ordering system, when the user selects dishes and places an order
How to open filtered duplicate files in Quark
Mar 01, 2024 am 11:25 AM
When using Quark Browser, there is a function to filter duplicate files. Some friends are not very familiar with this. Here I will introduce how to turn on this function. If you are interested, come and take a look with me. 1. First, click "Quark Browser" on your mobile phone to enter the interface, then click and select "Quark Network Disk" in the options in the middle of the page to open and enter. 2. Find "Backup Settings" in the lower part of the Quark network disk interface, and click to open it, as shown in the figure below: 3. Next, on the page you enter, there is a "Filter Duplicate Files", which is displayed behind it There is a switch button. Click the circular slider on it and set it to color to turn on this function. When you continue to back up files, duplicate files will be skipped to save network disk capacity.
How to implement an online reservation system using WebSocket and JavaScript
Dec 17, 2023 am 09:39 AM
How to use WebSocket and JavaScript to implement an online reservation system. In today's digital era, more and more businesses and services need to provide online reservation functions. It is crucial to implement an efficient and real-time online reservation system. This article will introduce how to use WebSocket and JavaScript to implement an online reservation system, and provide specific code examples. 1. What is WebSocket? WebSocket is a full-duplex method on a single TCP connection.
JavaScript and WebSocket: Building an efficient real-time weather forecasting system
Dec 17, 2023 pm 05:13 PM
JavaScript and WebSocket: Building an efficient real-time weather forecast system Introduction: Today, the accuracy of weather forecasts is of great significance to daily life and decision-making. As technology develops, we can provide more accurate and reliable weather forecasts by obtaining weather data in real time. In this article, we will learn how to use JavaScript and WebSocket technology to build an efficient real-time weather forecast system. This article will demonstrate the implementation process through specific code examples. We
In-depth analysis of the role and usage of the static keyword in C language
Feb 20, 2024 pm 04:30 PM
In-depth analysis of the role and usage of the static keyword in C language. In C language, static is a very important keyword, which can be used in the definition of functions, variables and data types. Using the static keyword can change the link attributes, scope and life cycle of the object. Let’s analyze the role and usage of the static keyword in C language in detail. Static variables and functions: Variables defined using the static keyword inside a function are called static variables, which have a global life cycle
Simple JavaScript Tutorial: How to Get HTTP Status Code
Jan 05, 2024 pm 06:08 PM
JavaScript tutorial: How to get HTTP status code, specific code examples are required. Preface: In web development, data interaction with the server is often involved. When communicating with the server, we often need to obtain the returned HTTP status code to determine whether the operation is successful, and perform corresponding processing based on different status codes. This article will teach you how to use JavaScript to obtain HTTP status codes and provide some practical code examples. Using XMLHttpRequest
