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

获取 HTML 中指定 className 所在的内容并去除标签,可以通过 JavaScript 函数来实现。下面是具体步骤:

获取 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所在的内容并去除标签

基础教程推荐