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;
}
相关推荐
琹箐36 分钟前
Ant ASpin自定义 indicator 报错
前端·javascript·typescript
小小小小小惠41 分钟前
Responsetype blob会把接口接收的二进制文件转换成blob格式
前端·javascript
爱电摇的小码农41 分钟前
【深度探究系列(5)】:前端开发打怪升级指南:从踩坑到封神的解决方案手册
前端·javascript·css·vue.js·node.js·html5·xss
爱编程的喵1 小时前
React入门实战:从静态渲染到动态状态管理
前端·javascript
唐叔在学习2 小时前
不用装插件!3轮对话,我用油猴脚本+AI复刻了掘金闪念笔记,真香!
javascript·浏览器
AliciaIr2 小时前
深入React事件机制:解密“合成事件”与“事件委托”的底层奥秘
javascript·react.js
元气小嘉2 小时前
前端技术小结
开发语言·前端·javascript·vue.js·人工智能
励志的大鹰哥2 小时前
V少JS基础班之第七弹
开发语言·javascript·ecmascript
cccyi72 小时前
Vue3基础知识
javascript·vue.js
江城开朗的豌豆3 小时前
Vue计算属性:为什么我的代码突然变优雅了?
前端·javascript·vue.js