@wordpress/url

インストール

モジュールをインストールします

npm install @wordpress/url --save

このパッケージは、あなたのコードがES2015+環境で実行されることを前提としています。もし、言語機能やAPIのサポートが限られているか、全くない環境を使用している場合は、コードに@wordpress/babel-preset-defaultで提供されるポリフィルを含めるべきです。

使用法

addQueryArgs

指定されたURLにクエリ文字列として引数を追加します。URLに既にクエリ引数が含まれている場合、引数は既存のセットとマージされ（優先されます）、適用されます。

使用法

const newURL = addQueryArgs( 'https://google.com', { q: 'test' } ); // https://google.com/?q=test

パラメータ

• url [string]: 引数を追加するURL。省略した場合、結果のクエリ文字列のみが返されます。
• args [Object]: URLに適用するクエリ引数。

戻り値

• string: 引数が適用されたURL。
  

buildQueryString

入力クエリデータを使用してURLエンコードされたクエリ文字列を生成します。

これは、PHPのhttp_build_queryと同等に動作することを意図しており、エンコーディングタイプPHP_QUERY_RFC3986（スペースは%20）で構成されています。

使用法

const queryString = buildQueryString( {
   simple: 'is ok',
   arrays: [ 'are', 'fine', 'too' ],
   objects: {
   evenNested: {
   ok: 'yes',
   },
   },
} );
// "simple=is%20ok&arrays%5B0%5D=are&arrays%5B1%5D=fine&arrays%5B2%5D=too&objects%5BevenNested%5D%5Bok%5D=yes"

パラメータ

• data Record<string,*>: エンコードするデータ。

戻り値

• string: クエリ文字列。
  

cleanForSlug

投稿スラッグとして使用するために文字列の基本的なクリーンアップを行います。

これは、WordPressコアのsanitize_title()が行うことの一部を再現しますが、スラッグがどのようになるかを近似することを目的としています。

Latin-1 SupplementおよびLatin Extended-Aの文字を基本的なラテン文字に変換します。結合ダイアクリティカルマークを削除します。空白、ピリオド、およびスラッシュをハイフンに変換します。ハイフン以外の残りの非単語文字を削除します。残りの文字列を小文字に変換します。オクテット、HTMLエンティティ、または他のエンコードされた文字は考慮しません。

パラメータ

• string string: 処理されるタイトルまたはスラッグ。

戻り値

• string: 処理された文字列。
  

filterURLForDisplay

表示用のURLを返します。

使用法

const displayUrl = filterURLForDisplay(
   'https://www.wordpress.org/gutenberg/'
); // wordpress.org/gutenberg
const imageUrl = filterURLForDisplay(
   'https://www.wordpress.org/wp-content/uploads/img.png',
   20
); // …ent/uploads/img.png

パラメータ

• url string: 元のURL。
• maxLength number|null: URLの長さ。

戻り値

• string: 表示されるURL。
  

getAuthority

URLの権限部分を返します。

使用法

const authority1 = getAuthority( 'https://wordpress.org/help/' ); // 'wordpress.org'
const authority2 = getAuthority( 'https://localhost:8080/test/' ); // 'localhost:8080'

パラメータ

• url string: 完全なURL。

戻り値

• string|void: URLの権限部分。
  

getFilename

URLのファイル名部分を返します。

使用法

const filename1 = getFilename( 'http://localhost:8080/this/is/a/test.jpg' ); // 'test.jpg'
const filename2 = getFilename( '/this/is/a/test.png' ); // 'test.png'

パラメータ

• url string: 完全なURL。

戻り値

• string|void: URLのファイル名部分。
  

getFragment

URLのフラグメント部分を返します。

使用法

const fragment1 = getFragment(
   'http://localhost:8080/this/is/a/test?query=true#fragment'
); // '#fragment'
const fragment2 = getFragment(
   'https://wordpress.org#another-fragment?query=true'
); // '#another-fragment'

パラメータ

• url string: 完全なURL

戻り値

• string|void: URLのフラグメント部分。
  

getPath

URLのパス部分を返します。

使用法

const path1 = getPath( 'http://localhost:8080/this/is/a/test?query=true' ); // 'this/is/a/test'
const path2 = getPath( 'https://wordpress.org/help/faq/' ); // 'help/faq'

パラメータ

• url string: 完全なURL。

戻り値

• string|void: URLのパス部分。
  

getPathAndQueryString

URLのパス部分とクエリ文字列部分を返します。

使用法

const pathAndQueryString1 = getPathAndQueryString(
   'http://localhost:8080/this/is/a/test?query=true'
); // '/this/is/a/test?query=true'
const pathAndQueryString2 = getPathAndQueryString(
   'https://wordpress.org/help/faq/'
); // '/help/faq'

パラメータ

• url string: 完全なURL。

戻り値

• string: URLのパス部分とクエリ文字列部分。
  

getProtocol

URLのプロトコル部分を返します。

使用法

const protocol1 = getProtocol( 'tel:012345678' ); // 'tel:'
const protocol2 = getProtocol( 'https://wordpress.org' ); // 'https:'

パラメータ

• url string: 完全なURL。

戻り値

• string|void: URLのプロトコル部分。
  

getQueryArg

URLの単一のクエリ引数を返します

使用法

const foo = getQueryArg( 'https://wordpress.org?foo=bar&bar=baz', 'foo' ); // bar

パラメータ

• url string: URL。
• arg string: クエリ引数名。

戻り値

• QueryArgParsed|void: クエリ引数の値。
  

getQueryArgs

指定されたURLのクエリ引数のオブジェクトを返します。指定されたURLが無効であるか、クエリ文字列がない場合、空のオブジェクトが返されます。

使用法

const foo = getQueryArgs( 'https://wordpress.org?foo=bar&bar=baz' );
// { "foo": "bar", "bar": "baz" }

パラメータ

• url string: URL。

戻り値

• QueryArgs: クエリ引数オブジェクト。
  

getQueryString

URLのクエリ文字列部分を返します。

使用法

const queryString = getQueryString(
   'http://localhost:8080/this/is/a/test?query=true#fragment'
); // 'query=true'

パラメータ

• url string: 完全なURL。

戻り値

• string|void: URLのクエリ文字列部分。
  

hasQueryArg

URLが指定されたクエリ引数を含むかどうかを判断します。

使用法

const hasBar = hasQueryArg( 'https://wordpress.org?foo=bar&bar=baz', 'bar' ); // true

パラメータ

• url string: URL。
• arg string: クエリ引数名。

戻り値

• boolean: URLがクエリ引数を含むかどうか。
  

isEmail

指定された文字列がメールのように見えるかどうかを判断します。

使用法

const isEmail = isEmail( '[email protected]' ); // true

パラメータ

• email string: 検査する文字列。

戻り値

• boolean: メールのように見えるかどうか。
  

isPhoneNumber

指定された文字列が電話番号のように見えるかどうかを判断します。

使用法

const isPhoneNumber = isPhoneNumber( '+1 (555) 123-4567' ); // true

パラメータ

• phoneNumber string: 検査する文字列。

戻り値

• boolean: 電話番号のように見えるかどうか。
  

isURL

指定された文字列がURLのように見えるかどうかを判断します。

関連

• https://url.spec.whatwg.org/
• https://url.spec.whatwg.org/#valid-url-string

使用法

const isURL = isURL( 'https://wordpress.org' ); // true

パラメータ

• url string: 検査する文字列。

戻り値

• boolean: URLのように見えるかどうか。
  

isValidAuthority

提供された権限内の無効な文字をチェックします。

使用法

const isValid = isValidAuthority( 'wordpress.org' ); // true
const isNotValid = isValidAuthority( 'wordpress#org' ); // false

パラメータ

• authority string: URL権限を含む文字列。

戻り値

• boolean: 引数が有効な権限を含む場合はtrue。
  

isValidFragment

提供されたフラグメント内の無効な文字をチェックします。

使用法

const isValid = isValidFragment( '#valid-fragment' ); // true
const isNotValid = isValidFragment( '#invalid-#fragment' ); // false

パラメータ

• fragment string: URLフラグメント。

戻り値

• boolean: 引数が有効なフラグメントを含む場合はtrue。
  

isValidPath

提供されたパス内の無効な文字をチェックします。

使用法

const isValid = isValidPath( 'test/path/' ); // true
const isNotValid = isValidPath( '/invalid?test/path/' ); // false

パラメータ

• path string: URLパス。

戻り値

• boolean: 引数が有効なパスを含む場合はtrue
  

isValidProtocol

URLプロトコルが有効かどうかをテストします。

使用法

const isValid = isValidProtocol( 'https:' ); // true
const isNotValid = isValidProtocol( 'https :' ); // false

パラメータ

• protocol string: URLプロトコル。

戻り値

• boolean: 引数が有効なプロトコル（例：http:、tel:）である場合はtrue。
  

isValidQueryString

提供されたクエリ文字列内の無効な文字をチェックします。

使用法

const isValid = isValidQueryString( 'query=true&another=false' ); // true
const isNotValid = isValidQueryString( 'query=true?another=false' ); // false

パラメータ

• queryString string: クエリ文字列。

戻り値

• boolean: 引数が有効なクエリ文字列を含む場合はtrue。
  

normalizePath

パスを指定すると、元のテキストに現れる順序に関係なく、等しいクエリパラメータの値が同一として扱われる正規化されたパスを返します。

パラメータ

• path string: 元のパス。

戻り値

• string: 正規化されたパス。
  

prependHTTP

TLDとして意図されているように見えるURLに「http://」を追加します。

使用法

const actualURL = prependHTTP( 'wordpress.org' ); // http://wordpress.org

パラメータ

• url string: テストするURL。

戻り値

• string: 更新されたURL。
  

prependHTTPS

TLDとして意図されているように見えるURLに「https://」を追加します。

注意：これは「http://」を「https://」に置き換えることはありません。

使用法

const actualURL = prependHTTPS( 'wordpress.org' ); // https://wordpress.org

パラメータ

• url string: テストするURL。

戻り値

• string: 更新されたURL。
  

removeQueryArgs

URLのクエリ文字列から引数を削除します

使用法

const newUrl = removeQueryArgs(
   'https://wordpress.org?foo=bar&bar=baz&baz=foobar',
   'foo',
   'bar'
); // https://wordpress.org?baz=foobar

パラメータ

• url string: URL。
• args ...string: クエリ引数。

戻り値

• string: 更新されたURL。
  

safeDecodeURI

*使用法*  
``````bash
const badUri = safeDecodeURI( '%z' ); // does not throw an Error, simply returns '%z'
`

パラメータ

• uri string: デコードするURI。

戻り値

• string: 可能であればデコードされたURI。
  

safeDecodeURIComponent

decodeURIComponentを使用してURIコンポーネントを安全にデコードします。decodeURIComponentがエラーをスローした場合、URIコンポーネントは変更されずに返されます。

パラメータ

• uriComponent string: デコードするURIコンポーネント。

戻り値

• string: 可能であればデコードされたURIコンポーネント。

このパッケージへの貢献

これはGutenbergプロジェクトの一部である個別のパッケージです。このプロジェクトはモノレポとして整理されています。特定の目的を持つ複数の自己完結型ソフトウェアパッケージで構成されています。このモノレポ内のパッケージはnpmに公開され、WordPressや他のソフトウェアプロジェクトで使用されています。

このパッケージやGutenberg全体への貢献について詳しく知りたい場合は、プロジェクトの主要な貢献者ガイドをお読みください。