Regex Needed to strip out all HTML apart of breaks and space

Question

I'm struggling with a finding or writing a regex to solve my problem. Here is my example:

$(function () {
  // localStorage.clear()
  
  $('#divEditable').focusout(function () {
  
  //var content = $(this).text()
  var content = $(this).html().replace(/<(?!br\s*\/?)[^>]+>/g, '');  
  
  localStorage.setItem('div',  content)
  
  loadDiv()
  
  })
})

var loadDiv = function() {
 $('#divEditable').html(localStorage.getItem('div'))
  console.log(localStorage.getItem('div'))
}

#divEditable {
  width: 400px;
  height: 600px;
  background: grey;
  overflow: auto;
  margin-right: 20px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="divEditable" contenteditable></div>

If I paste or write the text with a break:

Nam luctus aliquet nunc, in dignissim neque consequat facilisis. Nullam porta congue diam sit amet accumsan. Mauris vel vulputate lacus.

Maecenas enim dolor, feugiat sed eros ac, blandit vestibulum nibh. Duis volutpat, magna ut semper fermentum, dolor nulla dignissim quam, quis placerat augue leo ut ipsum.

the break will be removed. When I type the text something like this:

1. Test list
2. Test list
3. Test list

The breaks and spaces will be also removed. I'm looking for stripping all text styling, divs, images, lists etc. however only keep any form of text spacing and text breaks no mater if the text is pasted or typed. I hope this make sense.

A plain text + paragraphs, br, space

The working example is also here https://jsfiddle.net/zcwr7v2g/

Thanks

[Never parse HTML with regexes.](https://stackoverflow.com/questions/1732348/regex-match-open-tags-except-xhtml-self-contained-tags) — Cerbrus, Oct 04 '17 at 12:23

score 0 · Answer 1 · answered Oct 04 '17 at 12:46

0

If you are not participating in a contest or using regex is not a must, you can use innerText property to get the textual contents of the element. It will preserve line breaks and spaces.

See the snippet below:

var elem = document.getElementById('div1');

console.log(elem.innerText);

<div id="div1">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco lab.
  
  <br/>
  
  Lorem ipsum dolor Lorem ipsum dolor.

  <ul>
    <li>Coffee</li>
    <li>Tea</li>
    <li>Milk</li>
  </ul>

</div>

answered Oct 04 '17 at 12:46

Nisarg Shah

14,151
6
34
55

Is [this](https://jsfiddle.net/zcwr7v2g/2/) how you want it to work? Since you have a content editable, you need to use `innerHTML` property to save the markup of the html. – Nisarg Shah Oct 05 '17 at 03:16
This one is almost perfect the only issue is the new lines made by enter produce `
` rather than `
` so I had to reset `p` tag with css https://jsfiddle.net/zcwr7v2g/3/ – Ben Oct 05 '17 at 06:17
@Ben Which browser are you using? For me, in Chrome, the new lines are producing `

`. – Nisarg Shah Oct 05 '17 at 06:27
Yes I see know this is strange when I pease the text from here http://www.lipsum.com/feed/html I have '
' but when I type is '
' all I really need is a clean text which preserve a minimal formating without styles...
– Ben Oct 05 '17 at 06:47
That's good. You can post those details in an answer yourself. – Nisarg Shah Oct 05 '17 at 09:06

score 0 · Answer 2 · answered Oct 06 '17 at 06:07

0

The best way is to follow this link: https://www.sitepoint.com/jquery-set-innertext-2/

answered Oct 06 '17 at 06:07

Ben

345
2
4
13

Regex Needed to strip out all HTML apart of breaks and space

2 Answers2