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日

相关文章

  • 一文搞懂Java JDBC中的SQL注入问题

    一文搞懂Java JDBC中的SQL注入问题 什么是SQL注入? SQL注入是指攻击者利用客户端向服务器传递的SQL语句中的漏洞,注入恶意的查询语句或其他可执行的操作,从而获得非法的访问或者篡改数据的行为。SQL注入攻击是应用程序中最常见的攻击之一。 为什么要防止SQL注入? SQL注入攻击会使应用程序不按照设计来执行SQL语句,因而破坏了应用程序的安全性。…

    Java 2023年6月16日
    00
  • Spring batch批处理框架

    请允许我给您详细讲解“Spring Batch批处理框架”的完整攻略。 什么是Spring Batch? Spring Batch是Spring官方提供的一个用于大规模处理数据任务的框架。它能够对大量数据进行统一标准化集中处理,适用于许多任务,如大批量数据的ETL(Extract-Transform-Load),数据清理,报表生成等。基于Spring Bat…

    Java 2023年5月20日
    00
  • IntelliJ IDEA 2020常用配置设置大全(方便干活)

    IntelliJ IDEA 2020常用配置设置大全(方便干活) IntelliJ IDEA 是一款功能强大的开发工具,但是如果不进行常用配置,开发过程中的效率会受到一定的影响。本文将为大家介绍 IntelliJ IDEA 2020 的常用配置设置,以便您更好地使用这个工具提高开发效率。 1. 字体和颜色 在 IntelliJ IDEA 2020 中设置字体…

    Java 2023年5月19日
    00
  • 基于javaweb+jsp实现个人日记管理系统

    让我来详细解析一下“基于javaweb+jsp实现个人日记管理系统”的攻略吧。首先,我们需要了解这个系统的基本要素:JavaWeb以及JSP。 一、JavaWeb JavaWeb是指基于Java语言所开发的Web应用程序,在软件开发工程中,开发人员可以使用JavaWeb技术,实现分布式系统的实现。JavaWeb技术是建立在Java平台之上的,包含许多组件,例…

    Java 2023年5月20日
    00
  • Java日期工具类的封装详解

    下面我将详细介绍“Java日期工具类的封装详解”的攻略。 什么是Java日期工具类? Java日期工具类是Java中用于处理日期和时间的类库。使用日期工具类可以方便地进行日期和时间的转换、计算、比较等操作,提高程序的可靠性和效率。 常用的Java日期工具类有哪些? Java中内置了很多日期工具类,常用的有: java.util.Date类:表示日期和时间的类…

    Java 2023年5月20日
    00
  • 只需两步实现Eclipse+Maven快速构建第一个Spring Boot项目

    我会详细讲解“只需两步实现Eclipse+Maven快速构建第一个Spring Boot项目”的完整攻略,过程中会包含两条示例,供大家参考。 1. 新建Maven工程 打开Eclipse,选择File -> New -> Maven Project 在弹出的窗口中,选择archetype,并在Search框中输入“spring-boot”,选择最…

    Java 2023年5月19日
    00
  • JAVA位运算的知识点总结

    JAVA位运算的知识点总结 什么是位运算 在计算机中,数据都是以二进制表示的。位运算就是直接对二进制的位进行操作的运算,包括位与、位或、位异或以及位移动等操作。 位运算符号 位运算符号包括: 按位与:& 按位或:| 按位异或:^ 左移运算:<< 右移运算:>> 无符号右移运算:>>> 下面对每种符号进行详细讲…

    Java 2023年5月26日
    00
  • maven打包时候修改包名称带上git版本号和打包时间方式

    按照要求,我会为你提供一个完整的Maven项目中如何在打包时修改包名称带上git版本号和打包时间的攻略。 概述: Maven利用pom.xml文件管理项目信息和依赖,pom.xml文件中通过使用插件来执行相关的动作操作。在这里,我们需要用到maven-jar-plugin插件来进行Maven项目的打包操作。通过重写 ${project.build.final…

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