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;
}
相关推荐
巴博尔14 分钟前
uniapp的IOS中首次进入,无网络问题
前端·javascript·ios·uni-app
焚 城19 分钟前
UniApp 实现双语功能
javascript·vue.js·uni-app
被巨款砸中1 小时前
前端 20 个零依赖浏览器原生 API 实战清单
前端·javascript·vue.js·web
文韬_武略1 小时前
web vue之状态管理Pinia
前端·javascript·vue.js
董世昌411 小时前
js怎样改变元素的内容、属性、样式?
开发语言·javascript·ecmascript
mosen8681 小时前
【Vue】Vue Router4x关于router-view,transtion,keepalive嵌套写法报错
前端·javascript·vue.js
鸠摩智首席音效师2 小时前
如何清除 Yarn 缓存 ?
javascript
oh,huoyuyan3 小时前
如何在火语言中指定启动 Chrome 特定用户配置文件
前端·javascript·chrome
前端大聪明20023 小时前
single-spa原理解析
前端·javascript
一枚前端小能手3 小时前
📦 从npm到yarn到pnpm的演进之路 - 包管理器实现原理深度解析
前端·javascript·npm