searchanddisplace-core/resources/js/components/Regex/TextBox.vue

<template>
    <div id="text-box" class="text-box">
        <div ref="backdrop" class="backdrop">
            <div class="matches" v-html="matches"></div>
        </div>

        <textarea ref="text"
                  v-model="text"
                  placeholder="Enter text to check matches"
                  @scroll="handleScroll">
        </textarea>
    </div>
</template>

<script lang="ts">
import {Component, Prop, Vue} from "vue-property-decorator";

@Component
export default class TextBox extends Vue {
    private text: string = '';

    @Prop({default: ''})
    public readonly pattern!: string;
    @Prop()
    public readonly flags!: Array<string>;

    getMatches() {
        return this.text
            .replace(/\n$/g, '\n\n')
            .replace(new RegExp(this.pattern, this.flags.join('')), '<mark>$&</mark>');
    }

    handleScroll() {
        // this.$refs.backdrop.scrollTop = this.$refs.text.scrollTop;
    }

    get matches(): string {
        return this.getMatches();
    }
};
</script>