Improve paragraph splitting logic
This commit is contained in:
parent
f733f73509
commit
db9785744f
@ -8,8 +8,7 @@
|
||||
<script src="online-editor.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="besana-editor" class="online-editor" contenteditable="true">Lorem ipsum dolor sit amet consectetur adipisicing elit.
|
||||
Tole je nov paragraf</div>
|
||||
<div id="besana-editor" class="online-editor" contenteditable="true"></div>
|
||||
<button id="btn-check">Preveri txt</button>
|
||||
</body>
|
||||
</html>
|
||||
|
@ -1,33 +1,66 @@
|
||||
window.onload = () => {
|
||||
const btnCheck = document.getElementById('btn-check')
|
||||
btnCheck.addEventListener('click', checkText)
|
||||
|
||||
const textArea = document.getElementById('besana-editor')
|
||||
let timerId = null
|
||||
|
||||
// textArea.addEventListener('focus', () => {
|
||||
// timerId = setTimeout(checkText, 2000)
|
||||
// })
|
||||
|
||||
// textArea.addEventListener('input', () => {
|
||||
// clearTimeout(timerId)
|
||||
// timerId = setTimeout(checkText, 2000)
|
||||
// })
|
||||
}
|
||||
|
||||
function checkText() {
|
||||
const textArea = document.getElementById('besana-editor')
|
||||
const textAreaValue = textArea?.textContent
|
||||
console.log(textAreaValue)
|
||||
const paragraphs = separateParagraphs(textAreaValue)
|
||||
console.log(paragraphs)
|
||||
const textAreaContent = textArea?.innerHTML
|
||||
const text = createFirstParagraph(textAreaContent)
|
||||
const paragraphs = separateParagraphs(text)
|
||||
const modifiedParagraphs = paragraphs.map(paragraph =>
|
||||
mockSpellChecker(paragraph)
|
||||
)
|
||||
console.log(modifiedParagraphs)
|
||||
textArea.innerHTML = modifiedParagraphs.join('\n')
|
||||
textArea.innerHTML = modifiedParagraphs.join('')
|
||||
}
|
||||
|
||||
function separateParagraphs(text) {
|
||||
return text.split('\n')
|
||||
let paragraphs = text.match(/<div>.*?<\/div>/g)
|
||||
return paragraphs
|
||||
}
|
||||
|
||||
function mockSpellChecker(text) {
|
||||
const words = text.split(' ')
|
||||
const specificWords = ['Tole', 'nov', 'dolor']
|
||||
const specificWords = ['Tole', 'nov', 'test']
|
||||
const words = text.split(/(?=<)|(?<=\>)|\s/g).filter(word => word !== '')
|
||||
const modifiedWords = words.map(word => {
|
||||
if (specificWords.includes(word)) {
|
||||
const wordWithoutTags = word.replace(/<[^>]*>/g, '')
|
||||
if (specificWords.includes(wordWithoutTags)) {
|
||||
return `<span class="typo-mistake">${word}</span>`
|
||||
}
|
||||
return word
|
||||
})
|
||||
return modifiedWords.join(' ')
|
||||
|
||||
// This is necessary to remove spaces between opening and closing tags
|
||||
// TODO: improve this or find a better way to do it
|
||||
return modifiedWords
|
||||
.map((word, index) => {
|
||||
if (index === 0 || index === 1 || index === modifiedWords.length - 1) {
|
||||
return word
|
||||
}
|
||||
return ' ' + word
|
||||
})
|
||||
.join('')
|
||||
}
|
||||
|
||||
function createFirstParagraph(text) {
|
||||
const divRegex = /<div\b[^>]*>/i
|
||||
const firstDiv = text.match(divRegex)
|
||||
if (!firstDiv) return `<div>${text}</div>`
|
||||
const slicedText = text?.slice(0, firstDiv.index)
|
||||
const firstParagraph = `<div>${slicedText}</div>`
|
||||
const newText = firstParagraph + text.slice(firstDiv.index)
|
||||
return newText
|
||||
}
|
||||
|
@ -7,7 +7,6 @@
|
||||
border-radius: 10px;
|
||||
background-color: #f5f5f5;
|
||||
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
||||
font-family: 'Courier New', Courier, monospace;
|
||||
line-height: 1.6;
|
||||
white-space: pre-wrap;
|
||||
overflow-y: auto;
|
||||
|
Loading…
x
Reference in New Issue
Block a user