获取 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 cloud 集成 ribbon负载均衡的实例代码 2023-08-07
- Java如何实现文件压缩与上传FTP 2023-01-18
- 将多个ref游标从Oracle过程返回到Java 2023-11-05
- Java获取Excel中图片所在的行和列坐标位置 2023-03-22
- 解决swagger2中@ApiResponse的response不起作用 2023-01-02
- java – 从Oracle JDK迁移到OpenJDK所需的更改 2023-11-04
- 详解hibernate自动创建表的配置 2023-07-31
- SpringBoot自定义Starter实现流程详解 2023-06-01
- java 线程池存在的意义 2023-01-08
- 功能强大的TraceId 搭配 ELK使用详解 2023-05-19