JeremyJone 的文档站
GitHub

HTML 处理方法

JeremyJone ... 2024-6-18 大约 2 分钟

# HTML 处理方法

# 去除 html 标签

export const removeHtmltag = str => {
  return str.replace(/<[^>]+>/g, "");
};
1
2
3

# 获取 url 参数

export const getQueryString = name => {
  const reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
  const search = window.location.search.split("?")[1] || "";
  const r = search.match(reg) || [];
  return r[2];
};
1
2
3
4
5
6

# 动态引入 js

const injectScript = (src, type = "text/javascript") => {
  const s = document.createElement("script");
  s.type = type;
  s.async = false;
  s.src = src;
  document.body.appendChild(s);
};
1
2
3
4
5
6
7

# 根据 url 地址下载

export const download = url => {
  var isChrome = navigator.userAgent.toLowerCase().indexOf("chrome") > -1;
  var isSafari = navigator.userAgent.toLowerCase().indexOf("safari") > -1;
  if (isChrome || isSafari) {
    var link = document.createElement("a");
    link.href = url;
    if (link.download !== undefined) {
      var fileName = url.substring(url.lastIndexOf("/") + 1, url.length);
      link.download = fileName;
    }
    if (document.createEvent) {
      var e = document.createEvent("MouseEvents");
      e.initEvent("click", true, true);
      link.dispatchEvent(e);
      return true;
    }
  }
  if (url.indexOf("?") === -1) {
    url += "?download";
  }
  window.open(url, "_self");
  return true;
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

# el 是否包含某个 class

export const hasClass = (el, className) => {
  let reg = new RegExp("(^|\\s)" + className + "(\\s|$)");
  return reg.test(el.className);
};
1
2
3
4

# el 添加某个 class

export const addClass = (el, className) => {
  if (hasClass(el, className)) {
    return;
  }
  let newClass = el.className.split(" ");
  newClass.push(className);
  el.className = newClass.join(" ");
};
1
2
3
4
5
6
7
8

# el 去除某个 class

export const removeClass = (el, className) => {
  if (!hasClass(el, className)) {
    return;
  }
  let reg = new RegExp("(^|\\s)" + className + "(\\s|$)", "g");
  el.className = el.className.replace(reg, " ");
};
1
2
3
4
5
6
7

# 获取滚动的坐标

export const getScrollPosition = (el = window) => ({
  x: el.pageXOffset !== undefined ? el.pageXOffset : el.scrollLeft,
  y: el.pageYOffset !== undefined ? el.pageYOffset : el.scrollTop
});
1
2
3
4

# 页面滚动到顶部

export const scrollToTop = () => {
  const c = document.documentElement.scrollTop || document.body.scrollTop;
  if (c > 0) {
    window.requestAnimationFrame(scrollToTop);
    window.scrollTo(0, c - c / 8);
  }
};
1
2
3
4
5
6
7

# el 是否在视口范围内

/**
 * @param {Boolean} partiallyVisible 是否可以部分显示
 */
export const isElementVisible = (el, partiallyVisible = false) => {
  const { top, left, bottom, right } = el.getBoundingClientRect();
  const { innerHeight, innerWidth } = window;
  return partiallyVisible
    ? ((top > 0 && top < innerHeight) ||
        (bottom > 0 && bottom < innerHeight)) &&
        ((left > 0 && left < innerWidth) || (right > 0 && right < innerWidth))
    : top >= 0 && left >= 0 && bottom <= innerHeight && right <= innerWidth;
};
1
2
3
4
5
6
7
8
9
10
11
12

# 劫持粘贴板

export const copyTextToClipboard = value => {
  var textArea = document.createElement("textarea");
  textArea.style.background = "transparent";
  textArea.value = value;
  document.body.appendChild(textArea);
  textArea.select();
  try {
    var successful = document.execCommand("copy");
  } catch (err) {
    console.log("Oops, unable to copy");
  }
  document.body.removeChild(textArea);
};
1
2
3
4
5
6
7
8
9
10
11
12
13

# 给某个元素绑定滚动事件

/**
 * 给指定元素绑定滚动事件
 * @param {Object} opt
 * @example
 *      handleScroll({
 *          target: el,
 *          callback: dosomething(e, delta)
 *      })
 */
export const handleScroll = opt => {
  if (!opt.target) {
    return;
  }
  let callback = opt.callback || function() {};
  let target = opt.target;

  //获取兼容事件
  let mouseWheel = /Firefox/i.test(navigator.userAgent)
    ? "DOMMouseScroll"
    : "mousewheel";

  //IE
  if (document.attachEvent) {
    document.attachEvent("on" + mouseWheel, function(e) {
      if (e.target.parentElement == target) {
        callback(e, e.wheelDelta);
      }
    });
  }

  //FF、Chrome、Opera、safari
  else {
    document.addEventListener(mouseWheel, function(e) {
      e = e || window.event;
      if (e.target.parentElement == target) {
        if (e.detail) {
          //FF
          callback(e, e.detail * 40);
        } else {
          callback(e, e.wheelDelta);
        }
      }
    });
  }
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45