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 Security 中细化权限粒度的方法

    那么接下来我将详细讲解Spring Security中细化权限粒度的方法的完整攻略。 什么是Spring Security? Spring Security是一个基于Spring框架的安全性解决方案,旨在为企业Java应用程序提供权威的身份验证和授权支持。 Spring Security中如何细化权限粒度? 1. 使用注解来限制访问 在Spring Secu…

    Java 2023年5月20日
    00
  • java HttpClient传输json格式的参数实例讲解

    Java HttpClient传输JSON格式参数实例讲解 1. 什么是HttpClient HttpClient是一个HTTP客户端工具包,Apache HttpClient的封装版本是阿希替(AxTire)HTTP Client。 HttpClient我们可以用它来模拟浏览器的请求,实现登录、提交表单、发送请求等功能,适用于各种简单和复杂的操作。 2. …

    Java 2023年5月26日
    00
  • Java定义栈结构,并实现入栈、出栈操作完整示例

    下面是完整的Java定义栈结构,并实现入栈、出栈操作攻略。 什么是栈 栈是一种“后进先出”(Last In First Out,LIFO)的数据结构,典型的例子是一个子弹夹或一个餐盘堆叠。栈结构在计算机科学中有广泛的应用,例如在函数调用栈、表达式求值、语法分析等领域都有着重要的作用。 Java定义栈结构 在Java中,可以使用数组或链表来实现栈结构。下面是使…

    Java 2023年5月19日
    00
  • 了解在Flash中的编程工作

    了解在Flash中的编程工作是一个必要的过程,它可以帮助你学习如何使用Flash的编程工具来创建交互式的动画和应用程序。以下是一些步骤,可以帮助你开始学习Flash的编程工作。 步骤1:学习Flash编程语言 Flash编程语言可以使你直接控制Flash中的对象和操作。其中,ActionScript是Flash主要的编程语言。学习ActionScript可以…

    Java 2023年6月15日
    00
  • 详解springMVC之与json数据交互方法

    详解Spring MVC之与JSON数据交互方法 在Web开发中,与JSON数据交互是一种常见的需求。Spring MVC提供了多种方式来实现与JSON数据的交互。本文将详细介绍Spring MVC与JSON数据交互的相关知识,并提供两个示例说明。 Spring MVC中与JSON数据交互的方式 在Spring MVC中,与JSON数据交互的方式有以下几种:…

    Java 2023年5月17日
    00
  • Spring Security验证流程剖析及自定义验证方法

    接下来我将详细讲解“Spring Security验证流程剖析及自定义验证方法”的完整攻略。 1. Spring Security验证流程剖析 1.1 Spring Security简介 Spring Security是Spring框架的一个子项目,提供了基于Acegi Security(一款强大而且全面的开源安全框架)的安全处理功能,它能够为我们的应用程序…

    Java 2023年5月20日
    00
  • mybatis之增删改查

    下面是关于 MyBatis 的增删改查操作的完整攻略。 简介 MyBatis 是一种优秀的持久层框架,它封装了 JDBC 操作的细节,并提供了方便的 SQL 映射配置方法,使得开发者可以使用面向对象的方式进行 SQL 操作。 在 MyBatis 中,增删改查操作是非常常见的操作。本文将通过两个示例分别讲解如何使用 MyBatis 实现增删改查操作。 示例1:…

    Java 2023年5月20日
    00
  • 解决maven没有打包xml文件的问题

    解决maven没有打包xml文件的问题,可以通过修改pom.xml文件,将xml文件打包至目标文件中。 1.在pom.xml文件中增加插件 在pom.xml文件中增加以下插件: <plugins> <plugin> <artifactId>maven-resources-plugin</artifactId> …

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