JSFiddle - React, Tailwind, and code Playground

by Outrora

HTML

<div class="title translate-first-text">
	What is this ? 
  <h1>This is a real nice title</h1>
</div>
<hr/>
<div class="body translate-all">
  <p>Here we have the main subject of this page man!</p>
	<p>Everyone here should be translated</p>
	<p>We are using translate-all</p>
</div>
<hr/>
<div class="foot translate-all">
  <p>Foots are used to have ads on it, so no one cares</p>
</div>

JavaScript

let pendences = [
	{ type: 'first-line', element: '', originalText: '', translatedText: '' }
]
function getTextsToTranslate() {
		let firstLine  = document.querySelectorAll('.translate-first-text')
		let entireText = document.querySelectorAll('.translate-all')
		for (let ele of entireText) {
			let originalText = 
				ele.outerText
				.replace(/\s$/gm, '')
				 .replace(/(\n)|(\r)|(\t)/gm, ' ')
				  .replace(/\s{2,*}/gm, ' ')
						.trim()
			let element = ele
		}
		for (let ele of firstLine) {
			console.warn(
				ele.innerText
				 .split(/\n|\r|\t/gm)[0]
				  .trim()
			)
		}
		console.log(firstLine[0].childNodes[0].textContent)
}

getTextsToTranslate()

const TEXTS = {
	w: {
		a: [
			'We are using translate-all'
		],
		i: [
			'What is this ?'
		]
	},
	t: {
		i: [
			'This is a real nice title'
		]
	},
	e: {
		h: [
			'Everyone here should be translated'
		]
	},
	h: {
		w: [
			'Here we have the main subject of this page man!'
		]
	},
	f: {
		a: [
			'Foots are used to have ads on it, so one one cares'
		]
	}
}