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'.

CodePudding user response：

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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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.

CodePudding user response：

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(' ');