Transform a text with HTML tags into sentences while preserving the separators in Javascript

Question

Transform a text with HTML tags into sentences while preserving the separators in Javascript

Here is a unique string with some embedded HTML code:

This is the first sentence. In the second sentence, there is a <a href="http://google.com">Google</a> link! The third sentence may have an image like <img src="http://link.to.image.com/hello.png" /> and ends with a question mark. The last sentence is bolded <b>like this</b>??

I am looking to divide this unique string into sentences and keep the HTML intact. Here is the desired output:

[0] = This is the first sentence.
[1] = In the second sentence, there is a <a href="http://google.com">Google</a> link!
[2] = The third sentence may have an image like <img src="http://link.to.image.com/hello.png" /> and ends with a question mark.
[3] = The last sentence is bolded <b>like this</b>??

Any suggestions on how to achieve this? Maybe using Regex and match?

I found a similar solution that almost fits my needs, but it doesn't handle the HTML tags: JavaScript Split Regular Expression keep the delimiter

javascript

Answer 1

Answer №1

The simple part involves parsing; all you need to do is wrap an element around the string. However, splitting the sentences proves to be a bit more challenging. Here is my initial attempt at the task:

var s = 'First sentence. Here is a <a href="http://google.com">Google.</a> link in the second sentence! The third sentence might contain an image like this <img src="http://link.to.image.com/hello.png" /> and ends with !? The last sentence looks like <b>this</b>??';

var wrapper = document.createElement('div');
wrapper.innerHTML = s;

var sentences = [],
buffer = [],
re = /[^.!?]+[.!?]+/g;

[].forEach.call(wrapper.childNodes, function(node) {
  if (node.nodeType == 1) {
    buffer.push(node.outerHTML); // store html
  } else if (node.nodeType == 3) {
    var str = node.textContent; // shift sentences
    while ((match = re.exec(str)) !== null) {
      sentences.push(buffer.join('') + match);
      buffer = [];
      str = str.substr(re.lastIndex + 1);
      re.lastIndex = 0; // reset regexp
    }
    buffer.push(str);
  }
});

if (buffer.length) {
  sentences.push(buffer.join(''));
}

console.log(sentences);

Demo

Each node that is either an element or an incomplete sentence is stored in a buffer until a complete sentence is identified; it is then added to the result array.

Answer 2

The simple part involves parsing; all you need to do is wrap an element around the string. However, splitting the sentences proves to be a bit more challenging. Here is my initial attempt at the task:

var s = 'First sentence. Here is a <a href="http://google.com">Google.</a> link in the second sentence! The third sentence might contain an image like this <img src="http://link.to.image.com/hello.png" /> and ends with !? The last sentence looks like <b>this</b>??';

var wrapper = document.createElement('div');
wrapper.innerHTML = s;

var sentences = [],
buffer = [],
re = /[^.!?]+[.!?]+/g;

[].forEach.call(wrapper.childNodes, function(node) {
  if (node.nodeType == 1) {
    buffer.push(node.outerHTML); // store html
  } else if (node.nodeType == 3) {
    var str = node.textContent; // shift sentences
    while ((match = re.exec(str)) !== null) {
      sentences.push(buffer.join('') + match);
      buffer = [];
      str = str.substr(re.lastIndex + 1);
      re.lastIndex = 0; // reset regexp
    }
    buffer.push(str);
  }
});

if (buffer.length) {
  sentences.push(buffer.join(''));
}

console.log(sentences);

Demo

Each node that is either an element or an incomplete sentence is stored in a buffer until a complete sentence is identified; it is then added to the result array.

Transform a text with HTML tags into sentences while preserving the separators in Javascript

Answer №1

Similar questions

Is there a way to streamline this function call that appears to be redundantly repeating the same actions?

How can I determine if my clients are utilizing the CDN or NPM versions of my JavaScript library?

PHP: Best practices for printing classes and IDs for jQuery rendering

Step-by-step guide on permanently assigning a value in Node.js

Guide to downloading a file from a byte base64 in Vue.js

Implementing X.PagedList within a modal pop-up window

Utilizing $stateParams within a personalized ui-router configuration attribute

`Launch link in new browser window`

How can I create the effect of text changing color automatically after a specified time period has elapsed

Trouble with defining variables in EJS

Where is the source of this ever-changing image?

Converting HTML table data into a JavaScript array

Consistently encountering the error message "(0 , _reactDom.h) is not a function" or "h is not defined"

Is there a way to convert a PHP array into a JavaScript object and return it?

The persistence of postback from the javascript function despite returning false when utilizing Asp Radiobuttonlist

Stubbing out a module's function with Sinon

Is there a way to properly access and interpret a .log extension file within a React component?

The error message: "Trying to access property 'get' of an undefined object"

Unable to locate Node.js /socket.io/socket.io.js on express 4.0

Implementing a soft transition to intl-tel-input plugin