js函数获取html中className所在的内容并去除标签

获取 HTML 中指定 className 所在的内容并去除标签,可以通过 JavaScript 函数来实现。下面是具体步骤:

  1. 选取需要获取 className 的元素

首先,需要通过 JavaScript 找到需要获取 className 的元素,可以使用 document.querySelector 或 document.querySelectorAll 方法。

const element = document.querySelector('.my-class');
  1. 获取元素的 innerHTML

获取到需要获取 className 的元素之后,就可以获取元素的 innerHTML 属性,这个属性可以返回元素中包含的所有 HTML 代码。

const elementHtml = element.innerHTML;
console.log(elementHtml);
  1. 使用正则表达式去除 HTML 标签

获取到元素的 innerHTML 之后,需要去掉其中的 HTML 标签。这可以通过正则表达式来实现。将 HTML 标签替换为空字符串即可。

const content = elementHtml.replace(/<\/?[a-z]+>/gi, '');
console.log(content);

完整代码示例 1:获取元素中指定 className 的文本内容

const element = document.querySelector('.my-class');
const elementHtml = element.innerHTML;
const content = elementHtml.replace(/<\/?[a-z]+>/gi, '');

console.log(content);

完整代码示例 2:获取所有指定 className 的元素文本内容

const elements = document.querySelectorAll('.my-class');
const contents = [];
for (let i = 0; i < elements.length; i++) {
  const elementHtml = elements[i].innerHTML;
  const content = elementHtml.replace(/<\/?[a-z]+>/gi, '');
  contents.push(content);
}

console.log(contents);

需要注意的是,获取到的内容仅仅是文本,如果需要保留部分标签可以在正则表达式中加入对应标签的正则匹配。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:js函数获取html中className所在的内容并去除标签 - Python技术站

(0)
上一篇 2023年6月15日
下一篇 2023年6月15日

相关文章

  • 如何在Spring Boot应用中优雅的使用Date和LocalDateTime的教程详解

    如何在Spring Boot应用中优雅的使用Date和LocalDateTime的教程详解 Spring Boot作为一个常用的Java Web框架,经常需要用到日期类型,例如在处理用户操作记录、日志记录、订单生成等业务中。本文将介绍在Spring Boot应用中如何优雅地使用Date和LocalDateTime类型。 Date类型 1. Date类型的创建…

    Java 2023年5月20日
    00
  • SpringBoot整合MybatisPlus的教程详解

    SpringBoot整合MybatisPlus的教程详解 本篇文章将介绍SpringBoot如何整合MybatisPlus,并给出两个示例供参考。 简介 SpringBoot是一个快速构建Spring应用程序的框架,整合了大量常用的第三方库。MybatisPlus是基于Mybatis的增强工具,简化了在Mybatis中的开发流程。 准备工作 在开始前,请确保…

    Java 2023年5月19日
    00
  • java(包括springboot)读取resources下文件方式实现

    下面是详细讲解“java(包括springboot)读取resources下文件方式实现”的完整攻略。 1. 背景 在Java中,经常需要读取resources下的文件。resources文件夹通常位于项目的classpath下,可以存放各种类型的文件,如文本文件、配置文件、图片等。这里将对读取resource文件夹下文件的几种常用方法进行讲解。 2. 使用…

    Java 2023年5月19日
    00
  • java实现简易超市管理系统 附源码下载

    Java实现简易超市管理系统攻略 实现思路 本超市管理系统的主要功能包括如下: 实现商品的库存管理功能,包括商品的入库、出库和查询等操作。 实现商品的销售管理功能,包括购物车、结算和打印小票等操作。 实现系统的用户管理功能,包括用户登录和登出、用户信息修改等操作。 根据上述需求,我们可以把整个系统分成三大模块:商品管理模块、销售管理模块和用户管理模块。每个模…

    Java 2023年5月18日
    00
  • Java简单计时的实现案例(可以用来限时循环)

    让我们来详细讲解一下“Java简单计时的实现案例(可以用来限时循环)”的完整攻略。 思路概述 实现计时器的基本思路如下: 设置一个计时器变量,反映经过的时间。 确定计时器启动时刻。 定时器中执行要计时的动作(循环等)。 规定计时器结束条件,一般用时间限制或者次数限制。 计算执行完毕所需时间。 输出结果等。 根据这个思路,我们可以实现一个简单可用的计时器。 示…

    Java 2023年5月19日
    00
  • java字符串格式化输出实例讲解

    Java字符串格式化输出实例讲解 在Java中,我们可以使用格式化字符串来控制输出的格式。使用格式化字符串可以让我们更加方便地输出值,并且可以让输出结果更加易读。 格式化字符串的语法 格式化字符串的语法为: System.out.printf(format, argument_list); 其中format是格式化字符串,argument_list是需要输出…

    Java 2023年5月26日
    00
  • Jackson将json string转为Object,org.json读取json数组的实例

    Jackson是一个流行的Java库,它提供了将Java对象转换为JSON(序列化)以及将JSON转换为Java对象(反序列化)的功能。下面对Jackson将JSON字符串转换为Java对象和使用org.json读取JSON数组进行详细讲解: Jackson将JSON字符串转为Java对象 以下是将JSON字符串转换为Java对象的步骤: 引入Jackson…

    Java 2023年5月26日
    00
  • 2019第十届蓝桥杯JavaB组省赛真题详解

    2019第十届蓝桥杯JavaB组省赛真题详解 题目描述 题目描述过于复杂,详细内容可见官网。 题目解析 第1~4题 相对简单,主要考察对Java语言基础的掌握程度。可以通过阅读Java编程思想或者其他Java语言相应教材来增强实力。 第5题 本题要求按照要求对字符串进行处理并输出,通过分割和拼接字符串,可以轻松实现。 示例1: 输入: hello LanQi…

    Java 2023年5月20日
    00
合作推广
合作推广
分享本页
返回顶部