获取 HTML 中指定 className 所在的内容并去除标签,可以通过 JavaScript 函数来实现。下面是具体步骤:
获取 HTML 中指定 className 所在的内容并去除标签,可以通过 JavaScript 函数来实现。下面是具体步骤:
- 选取需要获取 className 的元素
首先,需要通过 JavaScript 找到需要获取 className 的元素,可以使用 document.querySelector 或 document.querySelectorAll 方法。
const element = document.querySelector('.my-class');
- 获取元素的 innerHTML
获取到需要获取 className 的元素之后,就可以获取元素的 innerHTML 属性,这个属性可以返回元素中包含的所有 HTML 代码。
const elementHtml = element.innerHTML;
console.log(elementHtml);
- 使用正则表达式去除 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所在的内容并去除标签


基础教程推荐
- 一文搞懂Spring中的注解与反射 2022-12-14
- Java多线程教程之如何利用Future实现携带结果的任务 2023-08-10
- Java实现规则几何图形的绘制与周长面积计算详解 2023-02-27
- Java实现文件分片上传接口的示例代码 2023-03-15
- Java获取系统当前时间年月日 2023-10-08
- 安装 Java 开发工具包JDK(Windows版本) 2023-09-01
- SpringMVC参数传递之基本数据类型和复杂对象说明 2023-06-23
- SpringBoot 整合mybatis+mybatis-plus的详细步骤 2023-01-29
- SpringBoot解决BigDecimal传到前端后精度丢失问题 2022-12-07
- ubuntu 14.04 java开发环境搭建 jdk 以及 inteliJ IDEA安装 2023-08-31