10 JavaScript Tips 🎈for Senior Front-end Programmers

孟陬2024-04-19 18:17

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

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')

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

其他 query 需要不受影响的保留
需要对新的 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;
}