How to extract the content of the first paragraph in html string react native

user_13294119 0
Viewed 2696

I am working on a react native project and I have an html string json api response. I am using react-native-render-html to render it, and I can get all paragraphs and apply specific things like number of lines ,etc.. . However I want to get only the first paragraph in the response.

str response='<p>text1</p> <p>text2</p> <p>text3</p>';

Is it possible to write a regular expression to get only the content of first paragraph which is for example text1 ?

react-native javascript
3 Answers

I don't use React Native but in javascript you could do something like that:

const paragraphs = response.split("</p>")
const firstParagraph = paragraphs[0]+'</p>';

Or with a regex you can do something like that:

// extract all paragraphe from the string
const matches = [];
response.replace(/<p>(.*?)<\/p>/g, function () {
    //use arguments[0] if you need to keep <p></p> html tags
    matches.push(arguments[1]);
});

// get first paragraph
const firstParagraph = (matches.length) ?  matches[0] : ""

Or like that (I think it is the best way in your case)

const response='<p>text1</p> <p>text2</p> <p>text3</p>';
const regex = /<p>(.*?)<\/p>/;
const corresp = regex.exec(response);
const firstParagraph = (corresp) ? corresp[0] : "" // <p>text1</p>
const firstParagraphWithoutHtml = (corresp) ? corresp[1] : "" // text1
user_28385860

Hope it will help


var response='<p>text1</p> <p>text2</p> <p>text3</p>';

var firstParagraphElement=response.split("</p>")[0] //firstparagraphElement="<p>text1"

var paragraphContent=firstParagraphElement.replace("<p>","")  //paragraphContent="text1"

javascript split() function reference click

javascript replace() function reference click

user_79940540

In React Native you can also use parse5 to extract a string from HTML code. I have used this code in a project for doing so:

import parse5 from 'parse5'

const isText = (tagName): Boolean => tagName === '#text'

const processNode = (node): String => {
    const nodeName = node.nodeName

    if (isText(nodeName)) {
        return node.value
    }
    if (!node.childNodes) {
        return ''
    }
    return node.childNodes.map((child, index) => processNode(child)).join(' ')
}

export const htmlToText = (html): String => {
    const root = parse5.parseFragment(html)
    return processNode(root).replace(/\s+/g, ' ').trim()
}

Here is a simple JEST test for the function above:

test('when full document htmlToText should get text', () => {
    const htmlToText1 = htmlToText("<html><head><title>titleTest</title></head><body><a href='test0'>test01</a><a href='test1'>test02</a><a href='test2'>test03</a></body></html>")
    expect(htmlToText1)
    .toBe(`titleTest test01 test02 test03`);
});
user_27352860
Related