💔 DEPRECATED!!! USE @onereach/regular-expressions instead
@onereach/regex-helper
🔍 Vue component for creating and testing Regular Expressions.
🚀 Usage example
<template>
<RegexHelper :regex.sync="regex" />
</template>
<script>
import { RegexHelper, getRegexBodyFlags } from '@onereach/regex-helper'
export default {
components: {
RegexHelper
},
data () {
return {
regex: '/\d{2}/'
}
},
watch: {
regex (v) {
const { body, flags } = getRegexBodyFlags(v)
console.log('regex change', new RegExp(body, flags))
}
}
}
</script>
⚙ Props
{
/**
* RegExp value
*/
regex: {
type: String,
default: ''
},
/**
* Testable text value
*/
testInput: {
type: String,
default: ''
},
/**
* Error message. If not empty component will be in error state.
*/
error: {
type: String,
default: ''
},
/**
* Input field for RegExp
*/
regexInputVisibility: {
type: Boolean,
default: true
},
/**
* Extended information about RegExp parts
*/
regexDetailsVisibility: {
type: Boolean,
default: false
},
/**
* Docs/help information popup
*/
docsVisibility: {
type: Boolean,
default: false
},
/**
* Testable text input field
*/
testInputVisibility: {
type: Boolean,
default: false
},
/**
* Extended information about findings in testInput
*/
matchDetailsVisibility: {
type: Boolean,
default: false
},
/**
* Text input labels
*/
labels: {
type: Object,
default: () => ({ regex: '', testInput: '' })
}
readonly: {
type: Boolean,
default: false
},
}
🔥 Events
| Event | Payload | Description |
|---|---|---|
| matchFound | arrayOfMatches |
Emitted when got match in testInput |
| focus | null |
Emitted when regex input field is focused |
| blur | null |
Emitted when regex input field is unfocused |
Exports
{ RegexHelper, RegexDocs, getRegexBodyFlags }