JavaScript Replace - Convert br Tags To New Lines

Question

I have a JavaScript function that looks like this:

function onAfterTranslate(item, translator) {
var thing = item.translated_text;
document.myform.keywords.value = "Translated Text:\r\n\r\n" + thing.replace(/<br>/g, "\r\n");
}

The parameter named item is an object, which includes an property called translated_text .

These are the contents of this variable:

mono <br> toro <br> gato <br> perro <br> elefante 

What I want to do is convert the br tags to newline characters. (Ideally, it should look for optional spaces immediately before and after the br tag, and it should also accept any of the valid formats of br tag that exist, but that's not crucial at the moment.)

However, the replace command in the above code is not working, and I can't work out why.

If I remove the replace command so the line ends with the variable name thing, then it behaves as expected, updating the textarea box in my form with the correct value.

Even if I try replacing the letter "o" with an asterisk, it still doesn't work, which would suggest I'm doing something fundamentally wrong here.

Any suggestions?

Answer 1

You can use \\s to look for spaces and ? for " preceding char may occur once or not ". The regex is here below.

/\s?(<br\s?\/?>)\s?/g

Here below is an example with all possible br tags: <br> , <br /> and <br/> with some spaces in between.

 var input = document.getElementById('input').value; console.log(input); document.getElementById('output').value = input.replace(/\\s?(<br\\s?\\/?>)\\s?/g, "\\r\\n"); 

 textarea { width: 400px; height: 100px; } 

 <h3>input</h3> <textarea id="input"> fooo <br> bar <br> lorum ipsum dolor. valar durum <br /> kel alar fol <br /> durom <br />. a bread of kebab is tasteful !<br/> EOL </textarea> <hr /> <h3>output</h3> <textarea id="output"></textarea> 

Answer 2

try

var text = "mono <br> totono <br> gato <br> elefante"
console.log( text.split( "<br>" ).join( "\n" ) );

and for trimming white spaces

text.split( "<br>" ).map( function(val){ return String(val).trim(); } ).join( "\n" );

for putting this in a textarea

document.body.innerHTML +=  "<textarea>" + text.split( "<br>" ).map( function(val){ return val.trim() } ).join( "\n" ) + "</textarea>" ;

Answer 3

So, it turns out the replace function was essentially fine (but enhanced now thanks to your contributions) - it was the format of the input data that was not what I was expecting.

I thought that the variable item.translated_text was an array element (because when I echoed it to the screen, I saw the value I was expecting), but it turned out it was actually an array, as I found out when I displayed the length of the variable and found it was only 1.

I now suspect that the item variable was a JSON construct and not a regular array, as I first thought.

Sorry if I wasted anyone's time on this.