I have a div with a contentEditable attribute and I struggle to extract the first text occurence from a string.
I am using innerHTML to get the text from it( I need to use it, can not use innerText or textContent) and it comes with a lot of <br>.
The string will be something like this:
'<br> This is some text <br> <br> Another piece of text'. I need only the text('This is some text') without <br>.
The string will always have <br> in it and the place of the <br> may vary.
I tried using the replaceAll('<br>', '') and it returns 'This is some text Another piece of text' but I need only the first occurence 'This is some text'.
You can use string.split() to divvy up the content by <br>, then run that through a simple filter that will remove any empty items in the array, and finally choose the first item in the array, which will be the text you want.
let fragment = document.querySelector('div.content').innerHTML.split('<br>').filter(a => a.trim())[0].trim() ;
console.log(fragment);<div class='content'>
<br>
<br> <br>
This is some text <br>
<br>
<br> This is some more text <br>
</div>Try
function getFirstNonBlankSubstring(text, separator) {
const array = text.split(separator);
for (const substring of array) {
if (substring.trim()) {
return substring;
}
}
}
getFirstNonBlankSubstring(element.innerHTML, '<br>') should give you what you need as long as you can count on the <br> tags looking exactly like that.
If you can't, you may need to walk the DOM to find text nodes.
You can doit like this
//get the text and remove white space from left
var readText = document.getElementById("content").textContent.trimLeft();
//How many splits you want out
var freeSpaces = 3;
//
var splittext = readText.split(' ');
var newText = splittext.slice(0, freeSpaces);
//final text
var finalText = newText.join(' ');