Optional Character in Form Input Text Pattern - html

Question

Apologies if this is answered elsewhere, please point me in that direction.
Using Node and EJS, I have a form field for capturing the name of a brewery, this comes via an API...
<label>Brewery</label><br>
<input id="formBreweryName" class="form-control" type="text" name="breweryname" ><br>
<label>Beer Name</label><br>
<input id="formBeerName" class="form-control" type="text" name="beername" >
Here's the ejs that both displays the brewery name in a <ul> and contains the onclick handler for populating the form...
<ul>
<% BeerList.forEach(function(objsofbeer){ %>
<li>
<a onclick="addFormText( '<%= objsofbeer.brewery.brewery_name %>','<%= objsofbeer.beer.beer_name %>')">
<span><%= objsofbeer.brewery.brewery_name %></span><br>
<span><%= objsofbeer.beer.beer_name %></span><br>
</a>
</li>
</ul>
And the javascript for porting the brewery name up to the form...
var addFormText = function( breweryName, beerName) {
document.getElementById('formBreweryName').value = breweryName;
document.getElementById('formBeerName').value = beerName;
}
the API passes me a brewery name like so...
brewery_name: 'Reuben\'s Brews',
I added the beer name in the code above for good measure.
The Issue
When there is an apostrophe in the brewery name, the brewery name will not show in the appropriate form field, BUT the brewery name does show in the section.
For most examples, the brewery name does not have an apostrophe. So the API brewery name shows up in the form field as expected. But as in the example above, the brewery name has an apostrophe, so the name will not show up in my form field.
I am hoping there is a non-javascript, pattern attribute solution that will let me optionally include apostrophes (or other unforeseen special characters) in the text. If not, then I'm open to javascript or other suggestions.
I see many examples of 'use pattern to exclude certain characters' or 'use pattern to force users to only use this given text pattern'. But I don't see anything that would allow for the optional inclusion of a character like an apostrophe (or any other optional inclusion of special characters).
If it seems like this is an issue beyond my form input field, I am happy to share more of my coding.

Answer 1

Not sure but i think the problem is that you need a double escape character before the accent, one for the ejs on the server and one for the js on the browser. Can you try using <%- instead of <%= (EJS doesn't escape characters).
Sorry i never used ejs... other try, very ugly...:
<ul>
<% BeerList.forEach(function(objsofbeer){ %>
<% objsofbeer.brewery.brewery_name = objsofbeer.brewery.brewery_name.replace("'","\\'"); %>
<% objsofbeer.beer.beer_name = objsofbeer.beer.beer_name.replace("'","\\'"); %>
<li>
<a onclick="addFormText( '<%= objsofbeer.brewery.brewery_name %>','<%= objsofbeer.beer.beer_name %>')">
<span><%= objsofbeer.brewery.brewery_name %></span><br>
<span><%= objsofbeer.beer.beer_name %></span><br>
</a>
</li>
or try playng with ` character instead " or '