10 JavaScript Tips 🎈for Senior Front-end Programmers

持续更新中,欢迎收藏......

1. 如何巧妙替换部分 query

比如想将 q 改成 '你好 world'

http://prophetes.ai/c?q=Who+is+on+the+new+initial+board+of+OpenAI%3F&source=hot

输出

prophetes.ai/c?q=%E4%BD%...

其中 q = encodeURIComponent('你好 world')

这样一个看起来简单的需求有几个注意点:

  1. 其他 query 需要不受影响的保留
  2. 需要对新的 query encode(比较容易忘记)。

一般的做法使用正则表达式精确替换不就可以了么?这里提供一个巧妙的办法:

js 复制代码
function updateQuery(newQuery) {
    const params = new URLSearchParams(location.search);

    params.set('q', newQuery);

    return params.toString();
  }

既能精准替换又能自动 encode 🎉!

2. 如何获取 HTML 标签内的所有文字(仅文字,嵌套的标签无需)

  • 输入 <ul>你好<li><strong>hello world</li></strong>世界</ul>
  • 输出 你好hello world世界

如果使用正则表达式很麻烦且易出错(brittle)。如果是浏览器环境有一种取巧方式,几行代码搞定,而且可读性很好:

js 复制代码
/**
 * @param {string} html
 */
function extractText(html) {
  const div = document.createElement('div');
  
  div.innerHTML = html;
  
  return div.textContent;
}
相关推荐
凉柚ˇ几秒前
Vue图片压缩方案
前端·javascript·vue.js
ByteCraze15 分钟前
秋招被问到的常见问题
开发语言·javascript·原型模式
渣哥32 分钟前
从代理到切面:Spring AOP 的本质与应用场景解析
javascript·后端·面试
UIUV1 小时前
JavaScript代理模式实战解析:从对象字面量到情感传递的优雅设计
javascript
摸着石头过河的石头1 小时前
JavaScript 防抖与节流:提升应用性能的两大利器
前端·javascript
_大学牲1 小时前
FuncAvatar: 你的头像氛围感神器 🤥🤥🤥
前端·javascript·程序员
渣哥1 小时前
面试必问:Spring Bean 的作用域类型有多少种?
javascript·后端·面试
533_2 小时前
[element-ui] el-tree 组件鼠标双击事件
前端·javascript·vue.js
Tom Ma.2 小时前
使用腾讯云云开发(CloudBase)的云函数,删除云存储中指定目录下的过期文件
前端·javascript·腾讯云
Hilaku2 小时前
技术、业务、管理:一个30岁前端的十字路口
前端·javascript·面试