Split plain text from img tag using javascript

Question

I have a api response that is a combination of plain text and image tag. What is the best way to separate plain text from the response? I need to separate plain text so I can style it separately.

This is the example of a response:

This is the cap you unscrew to open when you refuel your car <img alt="blah" src="https://www.lifesure.co.uk/cms/wp-content/uploads/2011/04/Tyre-Illustration-500.jpg" />

score 3 · Accepted Answer · answered Apr 23 '19 at 10:42

You can use regex to remove html tag like this

str = str.replace(/<(?:.|\n)*?>/gm, '');

or you this if only remove image tag str = str.replace(/<img .*?>/g, '');

var str = 'This is the cap you unscrew to open when you refuel your car <img alt="blah" src="https://www.lifesure.co.uk/cms/wp-content/uploads/2011/04/Tyre-Illustration-500.jpg" />'
//str = str.replace(/<(?:.|\n)*?>/gm, '');
str = str.replace(/<img .*?>/g, '');
console.log(str);

score 0 · Answer 2 · answered Apr 23 '19 at 10:45

One approach might be to use the following regular expression /<img[\s\w=\":/.-]+>/gmi to match and replace the <img /> tag in your response string:

const responseText = `This is the cap you unscrew to open when you refuel your car <img alt="blah" src="https://www.lifesure.co.uk/cms/wp-content/uploads/2011/04/Tyre-Illustration-500.jpg" />`

const responseWithoutImageTag = responseText.replace(/<img[\s\w=\":/.-]+>/gmi, '')

console.log(responseWithoutImageTag)

score 0 · Answer 3 · answered Apr 23 '19 at 10:46

0

A safer way than regular expressions is to parse the HTML and extract the text content:

var template = document.createElement('template');
template.innerHTML = 'This is the cap you unscrew to open when you refuel your car <img alt="blah" src="https://www.lifesure.co.uk/cms/wp-content/uploads/2011/04/Tyre-Illustration-500.jpg" />';

template.content.textContent returns 'This is the cap you unscrew to open when you refuel your car '

answered Apr 23 '19 at 10:46

Eric Eskildsen

4,269
2
38
55

Yes, that would be the way to go, but `.textContent` doesn't help with this part of the requirement: _"I need to separate plain text **so I can style it separately**"_ – Andreas Apr 23 '19 at 10:48
@Andreas True, but the gist of the question is how to separate them since how the style is applied depends on the method of rendering. – Eric Eskildsen Apr 23 '19 at 10:50

score 0 · Answer 4 · answered Apr 23 '19 at 10:46

You can use substring from o to index of image tag

    var str = 'This is the cap you unscrew to open when you refuel your car <img alt="blah" src="https://www.lifesure.co.uk/cms/wp-content/uploads/2011/04/Tyre-Illustration-500.jpg" />'

var newStr = str.substring(0, str.indexOf('<img'));
console.log(newStr)

score 0 · Answer 5 · answered Apr 23 '19 at 10:57

0

Simply put, you could do this:

const textOnly = str.slice(0, str.indexOf('<img'));

If you want the image tag only:

const imageTag = str.slice(str.indexOf('<img'), str.length);

(substring works too, like in the answer by Syed)

answered Apr 23 '19 at 10:57

Musonant

81
5

Split plain text from img tag using javascript

5 Answers5