find-string-in-string.js

class Inside {
	set(selector, strStart, strEnd) {
		this.selector = selector;
		this.strStart = strStart;
		this.strEnd = strEnd;

		this.position = null;
		this.counter = null;
		this.parts = null;

		this.setHtml();
		this.setPosition();
		this.setCounter();
		this.setChunks();
	}

	setHtml() {
		this.html = document.querySelector(this.selector).innerHTML;
	}

	setPosition() {
		const start = this.html.indexOf(this.strStart);
		const end = this.html.indexOf(this.strEnd, start);

		if (start == -1 || end == -1) return;

		this.position = {
			start: start,
			end: this.html.indexOf(this.strEnd, start),
			finish: this.html.length
		};
	}

	setCounter() {
		if (!this.position) return;

		this.counter = {
			before: this.position.start,
			match: this.position.end - this.position.start + this.strEnd.length,
			after: this.position.finish - this.position.end
		};
	}

	setChunks() {
		if (!this.position) return;

		this.parts = {
			before: this.html.substr(0, this.count.before),
			match: this.html.substr(this.position.start, this.count.match),
			after: this.html.substr(this.position.end + this.strEnd.length, this.count.after)
		};
	}

	get pos() {
		return this.position;
	}

	get count() {
		return this.counter;
	}

	get chunks() {
		return this.parts;
	}
}

<main>
        <p>Some text</p>

        BEFORE
        
        AFTER

        <p>Some more text</p>
  <!-- KEYWORDS: one --></main>

<script>
  document.addEventListener("DOMContentLoaded", () => {
    const InsideObj = new Inside();
    InsideObj.set('main', '<!-- KEYWORDS:', '-->');
    console.log(InsideObj.chunks);
  });
</script>