jQuery replace HTML

Question

In a portion of my code to get a "report view" where the element is different (textarea becomes a div or span) and use the same data with newlines I replace the new lines with page breaks.

Currently the function I use:

$.each($('[id^="mytext-text"]'),(i,e)=>{$(e).html($(e).html().replace(/\n/gm,'<br>'))})

I often find myself using this same format for replacing other things, i.e.,

$(e).text($(e).text+'more text');

Is there a better way (either about using line breaks or about the .text(.text())? I've seen suggestions to simply write your own function but I feel like that doesn't solve the generalized problem.

Answer 1

As Barmar explained in his comment, you can use the function as argument to text() and html(). These methods iterate over all the elements matched by selector so, there is no need of each.

Also, m-multiline flag is not required in the regex and can be removed.

Final Code:

$('[id^="mytext-text"]').html((index, html) => html.replace(/\n/g, '<br />'));

Answer 2

You could write a jQuery function that takes the method name and a function something like this completely unverified code:

jQuery.fn.replace = function replace(methodName, replacerFunc) {
  return this.each(function() { 
    var $this = $(this);
    var originalValue = $this[methodName]();
    var newValue      = replacerFunc( originalValue);
    $this[methodName]( newValue ); 
  }
}

And then calling it something like:

$('my-selector').replace('html', (v) => v.replace(/\n/gm,'<br>') );
$('my-selector').replace('text', (v) => v + 'more text' );