Giter Site home page Giter Site logo

vinta / pangu.js Goto Github PK

View Code? Open in Web Editor NEW
4.2K 63.0 294.0 8.99 MB

Paranoid text spacing in JavaScript

Home Page: https://chrome.google.com/webstore/detail/paphcfdffjnbcgkokihcdjliihicmbpd

License: MIT License

JavaScript 76.21% HTML 20.62% SCSS 3.17%
pangu javascript nodejs chrome-extension userscript text-spacing text html

pangu.js's Introduction

為什麼你們就是不能加個空格呢?

如果你跟我一樣,每次看到網頁上的中文字和英文、數字、符號擠在一塊,就會坐立難安,忍不住想在它們之間加個空格。這個外掛(支援 Chrome 和 Firefox)正是你在網路世界走跳所需要的東西,它會自動替你在網頁中所有的中文字和半形的英文、數字、符號之間插入空白。

漢學家稱這個空白字元為「盤古之白」,因為它劈開了全形字和半形字之間的混沌。另有研究顯示,打字的時候不喜歡在中文和英文之間加空格的人,感情路都走得很辛苦,有七成的比例會在 34 歲的時候跟自己不愛的人結婚,而其餘三成的人最後只能把遺產留給自己的貓。畢竟愛情跟書寫都需要適時地留白。

與大家共勉之。

Installation

For Users

For Developers

Usage

$ npm install pangu --save
# or
$ yarn add pangu

Browser

Files are located in ./node_modules/pangu/dist/browser/.

<head>
  <script src="pangu.min.js"></script>
</head>
<script>
  const text = pangu.spacing("當你凝視著bug,bug也凝視著你");
  // text = '當你凝視著 bug,bug 也凝視著你'

  pangu.spacingElementById('main');
  pangu.spacingElementByClassName('comment');
  pangu.spacingElementByTagName('p');

  document.addEventListener('DOMContentLoaded', () => {
    // listen to any DOM change and automatically perform spacing via MutationObserver()
    pangu.autoSpacingPage();
  });
</script>

pangu.js is also available on jsDelivr and cdnjs:

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/browser/pangu.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/browser/pangu.min.js"></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/pangu/4.0.7/pangu.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pangu/4.0.7/pangu.min.js"></script>

You can also import pangu.js as an ES Module via jspm or Skypack:

<script type="module">
  import pangu from 'https://jspm.dev/[email protected]';
  import pangu from 'https://cdn.skypack.dev/[email protected]';
</script>

Node.js

Learn more on npm.

const pangu = require('pangu');

const text = pangu.spacing('與PM戰鬥的人,應當小心自己不要成為PM');
// text = '與 PM 戰鬥的人,應當小心自己不要成為 PM'

pangu.spacingFile('/path/to/text.txt', (err, data) => {
  console.log(data);
});

pangu.spacingFile('/path/to/text.txt')
  .then((data) => {
    console.log(data);
  })
  .catch((err) => {
    console.error(err);
  });

const data = pangu.spacingFileSync('/path/to/text.txt');

You SHOULD NOT use pangu.js directly to spacing Markdown documents, this library is specially designed for HTML webpages and plain texts without any markup language. See issue #127.

CLI

$ pangu "不能信任那些Terminal或Editor用白底的人"
不能信任那些 Terminal 或 Editor 用白底的人

$ pangu --help
usage: pangu [-h] [-v] [-t] [-f] text_or_path

pangu.js -- Paranoid text spacing for good readability, to automatically insert whitespace
between CJK and half-width characters (alphabetical letters, numerical digits and symbols).

positional arguments:
  text_or_path   the text or file path to perform spacing

optional arguments:
  -h, --help     show this help message and exit
  -v, --version  show program's version number and exit
  -t, --text     specify the input value is a text
  -f, --file     specify the input value is a file path

Testing

You need to install Node.js.

$ git clone [email protected]:vinta/pangu.js.git && cd pangu.js
$ npm install
$ npm run test

License

Released under the MIT License.

Author

pangu.js's People

Contributors

7kfpun avatar aboutmydreams avatar airt avatar baurine avatar bitdeli-chef avatar cee avatar clkao avatar coldnew avatar demojameson avatar dependabot[bot] avatar dlackty avatar gasolin avatar jackkuo-tw avatar jiefoxi avatar jiminycricket avatar kidonng avatar mozillazg avatar plantain-00 avatar reedsun avatar semoncat avatar shuding avatar stevenjoezhang avatar vinta avatar x140yu avatar xslidian avatar zizhengwu avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

pangu.js's Issues

Unit Test 補完計畫

明年就是 2015 年了,再不快一點補 test,使徒就要來了啊!

順便丟上 Travis CI 好了

京东 (jd.com) 里选择某个商品其他配置时失效

在 京东(jd.com) 里点选某件商品后,若商品还有别的其他(如颜色、规格),点选这些配置时,会造会这些选项全部变灰,再无法选择。我尝试关掉几个扩展,最后发现应该是这个扩展的 bug

UserScript 版本

你好,我根据 v1.4 版弄了个 UserScript 版本,Firefox 下也可以了。
没有实现 Chrome 版中黑白名单的功能。

// ==UserScript==
// @name         為什麼你們就是不能加個空格呢?
// @description  自動在網頁中所有的中文字和半形的英文、數字、符號之間插入空白。(攤手)沒辦法,處女座都有強迫症。
// @author       Vinta
// @version      1.4
// @include      http*://*
// ==/UserScript==

/*
 Author: Vinta <http://vinta.ws/>
 Source: <https://github.com/gibuloto/paranoid-auto-spacing>
 License: [GNU General Public License v3.0 (GPL-3.0)](http://www.gnu.org/copyleft/gpl.html)
 */


function insert_space(text) {
    // 英文、數字、符號 ([a-z0-9~!@#&;=_\$\%\^\*\-\+\,\.\/(\\)\?\:\'\"\[\]\(\)])
    // 中文 ([\u4E00-\u9FFF])
    // 日文 ([\u3040-\u30FF])
    // http://www.diybl.com/course/6_system/linux/Linuxjs/20090426/165435.html
    // 中文在前
    text = text.replace(/([\u4e00-\u9fa5\u3040-\u30FF])([a-z0-9@#&;=_\[\$\%\^\*\-\+\(\/])/ig, '$1 $2');

    // 中文在後
    text = text.replace(/([a-z0-9#!~&;=_\]\,\.\:\?\$\%\^\*\-\+\)\/])([\u4e00-\u9fa5\u3040-\u30FF])/ig, '$1 $2');

    // 考慮增加 - + / * 前後的空白
    return text;
}

function traversal_and_spacing() {
    var current_documant = window.document;

    /*
     // >> 選擇任意位置的某個節點
     . >> 自己這個節點
     .. >> 父節點
     text() >> 尋找某點的文字型別,例如 hello 之於 <tag>hello</tag>
     normalize-space() >> 字串頭和尾的空白字元都會被移除,大於兩個以上的空白字元會被置換成單一空白

     另外 XML 是 case-sensitive 的
     試試 [translate(name(), "ABCDEFGHIJKLMNOPQRSTUVWXYZ", "abcdefghijklmnopqrstuvwxyz")="html"]
     而 lower-case(name(..)) 不起作用
     */

    var xpath_query = '//text()[normalize-space(.)][translate(name(..),"ABCDEFGHIJKLMNOPQRSTUVWXYZ","abcdefghijklmnopqrstuvwxyz")!="script"][translate(name(..),"ABCDEFGHIJKLMNOPQRSTUVWXYZ","abcdefghijklmnopqrstuvwxyz")!="style"]';

    var nodes = current_documant.evaluate(xpath_query, current_documant, null, XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE, null);

    // snapshotLength 要配合 XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE 使用
    var nodes_length = nodes.snapshotLength;

    for (var i = 0; i < nodes_length; ++i) {
        var current_node = nodes.snapshotItem(i);

        // .data 是 XML DOM 的屬性
        // http://www.w3school.com.cn/xmldom/dom_text.asp
        current_node.data = insert_space(current_node.data);
    }
}

function request_spacing() {
    traversal_and_spacing();
}

/*
 這一段是為了對付那些 AJAX 加載進來的內容
 當頁面 DOM 有變動時
 就再執行一次 spacing

 但是我要怎麼分辨由 ajax 引起的 DOM insert 和 spacing 造成的 DOM insert?
 */
var had_spacing; // 是不是剛剛執行完 spacing
var last_spacing_time = 0; // 0 means there were never any requests sent
document.addEventListener('DOMNodeInserted', function () {
    var d = new Date();
    var current_time = d.getTime(); // get the time of this change event
    var interval = current_time - last_spacing_time; // how many milliseconds since the last request

    if (interval >= 1000) { // more than 1 second
        last_spacing_time = current_time; // set last_spacing_time for next change event

        if (!had_spacing) {
            had_spacing = setTimeout(function () {
                request_spacing();
                had_spacing = null;
            }, 1000);
        }
    }
}, false);

// 網頁載入後就先判斷一次要不要執行 spacing
request_spacing();

光标乱窜 BUG

目前发现在百度贴吧、 QQ 空间和Twitter里有 BUG。

在百度贴吧里,输入文字后会强制刷新,添加空格后光标向前移动。导致无法连续输入。

在 QQ 空间里,输入相册密码时会自动添加空格,导致密码输入错误。

Twitter 官网上也有冲突,输入框症状同百度贴吧。

【UPDATA】

Gmail里也发现了。看到别人提交的Bug里有GDrive也有。

这个BUG可以关闭了吧 -_-|||

在 Google Docs 中輸入中文後游標會錯亂

重現問題的步驟:

  1. 在 Google Docs / Google Drive 中開啟一個 document
  2. 輸入 "abc漢字"
  3. 將游標移到 "漢字" 就會出現錯亂

附註:
如果輸入 "abc 漢字" 就不會,這給了我們一個很好的啟示:打字的時候就要記得加空格!

幫 Taipei,China 加上空格

對於外界質疑亞銀已片面更改我國為「Taipei,China」,國庫署組長陳柏誠 16 日表示,這不同於香港「Hong Kong, China」的用法,我方的名稱逗點後,並沒有加空格,「我一直覺得台灣還是有主權獨立在這裡,而非整個不見。」但政府仍會持續**。

http://newtalk.tw/news/view/2015-07-16/62294

培養用戶習慣,對插件的變動進行醒目提示?

首先要說的是這個插件真的是太有用辣!感謝作者以及相關貢獻人員的努力。 😄

在瀏覽網頁或者審查自己網站的過程中,有時候我很想知道頁面中的哪些空格是由插件完成的,這個時候我只能不斷的刷新頁面來進行比對;於是我想到了一個功能,可以設置對那些由插件插入的空格進行提示(比如呈現黃色高亮狀態,2、3秒后隱去),起到提醒的同時又不過於影響頁面瀏覽。

不知道我這個想法如何? 👀

P.S. “不要再他妈「空格之神显灵了」!”這個選項真的是太搞笑了!

處理特例

  • 陳上進 likes 林依諾's status.
    會變成:陳上進 likes 林依諾 's status.
  • Vinta-陳上進
    會變成:Vinta- 陳上進

處理 Google+ 的 g_editable 屬性

<div id=":3p.f" class="df b-K b-K-Xb URaP8 editable" g_editable="true" role="textbox" contenteditable="plaintext-only" aria-labelledby="180" dir="LTR">abc好<br></div>

google 不用 contentEditable 而是自己用了 g_editable

造成 Google 圖片搜尋 異常

使用環境:

  • Chrome 48.0.2564.109
    為什麼你們就是不能加個空格呢? 2.5.7(附加元件)
  • Firefox 42.0
    Greasemonkey 3.6
    為什麼你們就是不能加個空格呢? 2.5.6(腳本)

將 為什麼你們就是不能加個空格呢 關閉

正常情況下點擊Google圖片的搜尋結果
會跳出下方黑色區塊預覽窗格
正常

將 為什麼你們就是不能加個空格呢 開啟

異常情況下點擊Google圖片的搜尋結果
無法跳出下方黑色區塊預覽窗格
異常

測試 Firefox Chrome 皆是相同的情況

直角引号

请问后续是否会考虑加入「自动把中文语句的引号转为直角引号同时也不会改变英文语句」的功能呢?

如何处理 <textarea>的 value?

嗯还是 Mountain Reviewer 的事……

最近才注意到直接调用其实不能修改 <textarea>value……

囧rz……

求指点……

直接處理 HTML 的話會得到不正確的結果

這個問題主要是在用 hexo-filter-auto-spacing (內部呼叫了 pangu.node 的 insert_space()) 發現的。
雖然 pangu.node 的代碼應該頗為老舊,但是我試著置換它的 browser demo 用的代碼發現問題依舊。

來個例子~
輸入:

字字字<abbr title="">縮寫</abbr>,字字字

輸出:

字字字 <abbr title=""> 縮寫</abbr>,字字字

輸入:

字字字<abbr title="">縮寫</abbr><abbr title="">縮寫</abbr><abbr title="">縮寫</abbr>字字字

輸出:

字字字 <abbr title=""> 縮寫 </abbr><abbr title=""> 縮寫 </abbr><abbr title=""> 縮寫 </abbr> 字字字

預期結果是沒有改動。更怪的是這兩組結果並不一致。這有解嗎?

改用 XPathResult.ORDERED_NODE_SNAPSHOT_TYPE

…… 我不知道原因,但是好像在 document.evaluate() 函数里把第四个参数从 XPathResult.UNORDERED_NODE_SNAPSHOT_TYPE 改成 XPathResult.ORDERED_NODE_SNAPSHOT_TYPE 就好了

ref: #21

是否考虑删除多余空格?

(好吧原来发的那个 issue 是内容本身的问题)

那么问题来了,可以自动加上空格,是否可以考虑自动将不合适的空格去掉?例如,原文中,标点符号和紧跟的英文或数字之间有空格,那么这个空格就可以被删除..

支援 jQuery

主要是要用在 pangu.element_spacing('.something'),不過老實說總覺得沒有這種需求。

在按鈕選單中加入屏蔽網站選項

現在在 Chrome 的按鈕選單中只有兩個按鈕,希望能像其他擴展一樣,在打開某站點時,加上屏蔽某站點或在某站點上自動使用的選項,這樣就不必去選項頁面手動添加黑白名單了。

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.