前端小知识

---

1、禁止在浏览器上复制文字

// 禁用浏览器右键功能
document.oncontextmenu = new Function("event.returnValue=false");
// 禁用浏览器选择文字
document.onselectstart = new Function("event.returnValue=false");

2、滚动条滚动到页面顶部

(1) vue框架，跳转路由时滚动到页面顶部
在main.js文件中加入如下代码：

router.afterEach((to,from,next)=>{
  window.scrollTo(0,0);
})

(2) 使用dom对象滚动到页面顶部，代码如下：

document.body.scrollTop = document.documentElement.scrollTop = 0

(3) 使用element库的Backtop组件回到页面顶部，代码如下：

<el-backtop
  :right="30"
  :bottom="68"
  :visibility-height="50"
  v-if="$route.meta.isScrollTop"
></el-backtop>

参数详情：https://element.eleme.cn/#/zh-CN/component/backtop
使用场景(举例)：针对vue框架，
第一步：在APP.vue文件中添加如上代码，使用 v-if="$route.meta.变量名"判断在哪些页面中使用此组件；
第二步：在路由index.js文件中，使用meta(元数据)自定义对象，来控制backtop的显示与隐藏。
如下所示：

// App.vue
<template>
  <div id="app">
    <el-backtop
      :right="30"
      :bottom="68"
      :visibility-height="50"
      v-if="$route.meta.isScrollTop"
    ></el-backtop>
  </div>
</template>

//index.js
import Vue from 'vue'
import VueRouter from 'vue-router'

Vue.use(VueRouter)
const routes = [{
    path: '/login',
    name: 'login',
    component: () => import(/* webpackChunkName: "login" */ '../views/personalCenter/personalCenterLogin.vue'),
     meta: {
      isScrollTop: false
    }
  },{
    path: '/',
    name: 'home',
    component: () => import(/* webpackChunkName: "home" */ '../views/Home/Home.vue'),
    meta: {
      isScrollTop: true
    }
}]
const router = new VueRouter({
  mode: 'history',
  routes
})
export default router

3、js获取地址栏上某个参数值

function getUrlParam(key) {
	let reg = new RegExp("(^|&)" + key + "=([^&]*)(&|$)");
	let r = window.location.search.substr(1)
		.match(reg);
	if (r != null)
		return unescape(r[2]);
	return null;
}

getUrlParam('name')

4、使用正则表达式匹配字符串中，a标签的href值

(1) 代码

 function getHrefFromString (str) {
	if (!str) return ''
    const regex = /<a[^>]+href=["']([^"']+)["'][^>]*>/g;
    const matches = str.matchAll(regex);
    const hrefs = [];
    for (const match of matches) {
        hrefs.push(match[1]);
    }
    return hrefs;
}

(2) 举例

getHrefFromString("<a href="https://www.baidu.com/"></a><a href="https://dl.qdjha.cn/sinfo/104384025_4002059.html"></a>")

5、禁止原生input标签，按下回车键自动打开下载弹窗

input标签：<input class="pages-input-number" value="" type="text"/>

 $('.pages-input-number').keydown(function (event) {
     if (event.keyCode == 13) {
          event.preventDefault();
          return false;
      }
  })

6、从字符串中，找出a标签的href值

 function getHrefFromString (str) {
 	var reg = /<a([\s]+|[\s]+[^<>]+[\s]+)href=(\"([^<>"\']*)\"|\'([^<>"\']*)\')[^<>]*>/gi;
    var tempArr = str.toLowerCase().match(reg);
    var hrefValue = []
    for (var i = 0; i < tempArr.length; i++) {
         tempArr[i].toLowerCase().match(reg);
         hrefValue.push(RegExp.$3 + RegExp.$4)
     }
     return hrefValue
 }