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

yizhihongxing

获取 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日

相关文章

  • SpringMVC实现文件上传与下载

    1.文件上传文件上传一般包括前端页面的文件选择、文件上传、后台接收文件、保存文件等步骤。 1.1 前端页面HTML代码示例 <form action="upload" method="post" enctype="multipart/form-data"> <input type=…

    Java 2023年6月15日
    00
  • 详解maven的install的作用

    下面我来详细讲解一下“详解maven的install的作用”的完整攻略。 什么是 Maven Maven 是一个基于项目对象模型(POM)、依赖管理、构建生命周期和插件化架构的项目管理工具。通过Maven的POM文件,可以管理项目的依赖、生命周期、构建、测试等各个环节。 Maven Install 在 Maven 中,install 是指安装构建的文件到本地…

    Java 2023年5月20日
    00
  • Java Apache Commons报错“FileNotFoundException”的原因与解决方法

    当使用Java的Apache Commons类库时,可能会遇到“FileNotFoundException”错误。这个错误通常由以下原因之一起: 文件路径错误:如果文件路径错误,则可能会出现此错误。在这种情况下,需要检查文件路径以解决此问题。 文件不存在:如果文件不存在,则可能会出现此错误。在这种情况下,需要检查文件是否存在以解决此问题。 以下是两个实例: …

    Java 2023年5月5日
    00
  • JAVA加密算法实密钥一致协议代码示例

    让我先解释一下题目的含义。所谓“JAVA加密算法实密钥一致协议代码示例”,是指使用Java编程语言实现加密算法中的“密钥一致协议”(Key Agreement)的代码示例。这个协议的目的是让双方在不泄露密钥的情况下完成一次会话的加密和解密。 实现这个协议可以使用Java中的JCE(Java Cryptography Extension)库。下面是一份简单的实…

    Java 2023年5月27日
    00
  • Java中的封装是什么?

    Java中的封装(Encapsulation)是一种面向对象编程(OOP)中常见的原则之一,它是OOP中三大特征(封装、继承和多态)之一。 封装是指将一个对象的属性和方法进行私有化,使其不被外部直接访问和修改。目的在于隐藏对象的具体实现细节,增加代码的可读性、可维护性和安全性。在Java中,使用关键字private来实现封装。 下面以一个银行账户类Accou…

    Java 2023年4月27日
    00
  • Java基础教程之组合(composition)

    Java基础教程之组合(Composition) 在Java中,组合是一种重要的关系类型。它允许我们在一个类中使用其他类的实例,从而简化代码并提高代码的可重用性。本文将详细介绍组合的概念及其在Java编程中的应用。 什么是组合 组合指的是一个类使用另外一个类的实例作为自己的一个字段,这个字段可以是一个单独的对象也可以是一个对象数组。组合的关系可以用一个UML…

    Java 2023年5月23日
    00
  • SpringBoot实现文件下载功能的方式分享

    下面是Spring Boot实现文件下载功能的攻略: 准备工作 在开始Spring Boot实现文件下载功能之前,需要先在pom.xml文件中添加以下依赖: <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-b…

    Java 2023年5月19日
    00
  • 详解Java正则表达式语法

    下面我将为您详细讲解“详解Java正则表达式语法”的完整攻略。 详解Java正则表达式语法 什么是Java正则表达式 Java正则表达式是一种用于匹配和搜索文本的工具,它可以在文本中快速找到符合条件的内容。正则表达式使用一系列的符号和字符来创建规则,这些规则可用于匹配字符串中的文本。 基本的正则表达式语法 正则表达式由多个元字符和文本字符组成。元字符用于指定…

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