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;
}
相关推荐
普郎特8 分钟前
"不再迷惑!用'血缘关系'彻底搞懂JavaScript原型链机制"
前端·javascript
一枚前端小能手39 分钟前
「周更第3期」实用JS库推荐:Lodash
前端·javascript
艾小码39 分钟前
Vue组件到底怎么定义?全局注册和局部注册,我踩过的坑你别再踩了!
前端·javascript·vue.js
鹏多多1 小时前
前端复制功能的高效解决方案:copy-to-clipboard详解
前端·javascript
uhakadotcom1 小时前
Rollup 从0到1:TypeScript打包完全指南
前端·javascript·面试
Mintopia1 小时前
实时语音转写 + AIGC:Web 端智能交互的技术链路
前端·javascript·aigc
2503_928411561 小时前
9.15 ES6-变量-常量-块级作用域-解构赋值-箭头函数
前端·javascript·es6
Mintopia1 小时前
Next.js 单元测试究竟该选 JTest 还是 Vitest?
前端·javascript·next.js
遂心_1 小时前
深入浅出 querySelector:现代DOM选择器的终极指南
前端·javascript·react.js
遂心_1 小时前
DOM元素内容修改全攻略:从innerHTML到现代API的最佳实践
前端·javascript·react.js