Replace all break lines present in
tag with
tag in javascript

Question

I have a html string like this

<div>
    <p>
        All set to go in.
        Finally in.
    </p>
    <pre>
        Yup this text is present 
        inside of the pre tag.
    </pre>
</div>

I want to replace line breaks presents inside pre tag with <br> tags.

Final result should be.

<div>
    <p>
        All set to go in.
        Finally in.
    </p>
    <pre>Yup this text is present<br> inside of the pre tag.</pre>
</div>

What I have tried so far? I tried to this with regex and created pattern which looks like this :- /is(?=.*<\/pre>)/g which is only capable of finding 'is' which are before </pre> tag. I also want to include one more condition in this, i.e it should if after <pre> tag. Try this regex at https://regex101.com/r/qW7tZ1/5

How do I replace all line breaks in a string with <br /> tags? doesn't fit my condition as I don't want to replace all occurrence of line break.

The content of the `
` block is a string so why shouldn't the linked question offer a solution? — Andreas, Jul 10 '17 at 15:23
@Andreas Linked question replace all break lines present in the string. But I only want to replace those which are present inside
tag — Vishwesh Jainkuniya, Jul 10 '17 at 15:25

baao · Answer 1 · 2017-07-10T15:43:37.130

4

Don't use regex to parse/manipulate html, use simple DOM functions

let html = `<div>
<p>
All set to go in.
Finally in.
</p>
<pre>
Yup this text is present 
inside of the pre tag.
</pre>
</div>`;

function newlineToBr(str) {
  let div = document.createElement('div');
  div.innerHTML = str;
  Array.from(div.getElementsByTagName('pre')).forEach(pre => {
    pre.innerHTML = pre.innerHTML.replace(/\n/g, "<br />");
  });
  return div.innerHTML;
}
console.log(newlineToBr(html));

edited Jul 10 '17 at 15:43

answered Jul 10 '17 at 15:25

baao

71,625
17
143
203

I want to do this manipulation in react-native, can you please create a method which takes string and returns modified string? – Vishwesh Jainkuniya Jul 10 '17 at 15:29
Sure @VishweshJainkuniya. Surrounded the code with `function` for you – baao Jul 10 '17 at 15:31
can't find document. I have to run this in mobile app. https://stackoverflow.com/questions/43511168/get-dom-element-in-react-native – Vishwesh Jainkuniya Jul 10 '17 at 15:36

score 0 · Accepted Answer · answered Aug 12 '17 at 19:38

Here is a simple solution

export default (html: string): string => {
  if (html.indexOf('<pre>') === -1) return html;
  const array = html.split('<pre>');
  let finalContent = '';
  for (let i = 0; i < array.length; i++) {
    if (i === 0) {
      finalContent = `${array[0]}<pre>`;
    } else {
      const secondArray = array[i].split('</pre>');
      finalContent = `${finalContent}${secondArray[0]
        .replace(/\r\n/g, '<br />')
        .replace(/[\r\n]/g, '<br />')}</pre>${secondArray[1]}`;
      if (i !== array.length - 1) finalContent = `${finalContent}<pre>`;
    }
  }
  return finalContent;
};

Replace all break lines present in tag with tag in javascript

2 Answers2

Replace all break lines present in
tag with
tag in javascript