I have a page with formatting controls (for bold, italics, underline, etc). These buttons have javascript attached to them which works in Safari to take whatever text is highlighted and put the opening code (such as bracket-b-bracket) to the left of the highlighted text and the closing of the code (such as bracket-slash-b-bracket) to the right. All works as it should.
But not in Chrome, Brave, or Firefox 
So somehow there appear to be aspects of javascript that are compatlble with some browsers but not with others? (What is this, the 1990s???)
The javascript script defs look like this:
<script type="text/javascript">
function formatText (el,tag) {
var selectedText=document.selection?document.selection.createRange().text:el.value.substring(el.selectionStart,el.selectionEnd);
if (selectedText!='') {
var newText='['+tag+']'+selectedText+'[/'+tag+']';
el.value=el.value.replace(selectedText,newText)
}
}
</script>
… and is called by buttons defined like so:
<a href="javascript:;" onClick="formatText (PostRawContents,'b');"><b>B</b></a>
<a href="javascript:;" onClick="formatText (PostRawContents,'i');"><i>I</i></a>
<a href="javascript:;" onClick="formatText (PostRawContents,'u');"><u>U</u></a>
Anyone in a position to suggest a substitute that will work with all the damn browsers, please help me out here.
Can you give a few more details? This more or less works for me in Firefox:
<html>
<head>
<script type="text/javascript">
function formatText (el,tag) {
var selectedText=document.selection?document.selection.createRange().text:el.value.substring(el.selectionStart,el.selectionEnd);
if (selectedText!='') {
var newText='['+tag+']'+selectedText+'[/'+tag+']';
el.value=el.value.replace(selectedText,newText)
}
}
</script>
<body>
<a href="javascript:;" onClick="formatText (PostRawContents,'b');"><b>B</b></a>
<a href="javascript:;" onClick="formatText (PostRawContents,'i');"><i>I</i></a>
<a href="javascript:;" onClick="formatText (PostRawContents,'u');"><u>U</u></a>
<form>
<input type="text" id="PostRawContents" name="PostRawContents" value='foo bar baz'>
</form>
</body>
</head>
The flaw is in the value.replace function. I started with text of “blah blah blah”, but because replace() does a substring replacement, it only ever operates on the first “blah” even if you select the second. Works ok if the text is distinct, though.
This should work instead of your current replace function:
el.value = el.value.slice(0, el.selectionStart) + newText + el.value.slice(el.selectionEnd);
Dr. Strangelove’s modified replace works about as well as my existing one:
Safari = yes
Brave = no
Chrome = nope
Firefox = nope
Opera = yes
Arctic Fox (for legacy MacOS) = nope
Edge (Win 10) = nope
Internet Explorer (Win 7) = nope
The replace() fix isn’t about your browser problem–that’s just an ordinary coding bug. replace() works most of the time but not when there’s repeated text.
Your browser dependence is something else. I was not able to repro the problem in my sample HTML above.
Does your console log give any errors? I.e., hit F12 and see what the console tab shows (should work in pretty much any browser).
I see that I screwed up some tags in my sample, though Firefox didn’t care. Try this and see what you get:
<html>
<head>
<script type="text/javascript">
function formatText (el,tag) {
var selectedText=document.selection?document.selection.createRange().text:el.value.substring(el.selectionStart,el.selectionEnd);
if (selectedText!='') {
var newText='['+tag+']'+selectedText+'[/'+tag+']';
el.value = el.value.slice(0, el.selectionStart) + newText + el.value.slice(el.selectionEnd);
}
}
</script>
</head>
<body>
<a href="javascript:;" onClick="formatText (PostRawContents,'b');"><b>B</b></a>
<a href="javascript:;" onClick="formatText (PostRawContents,'i');"><i>I</i></a>
<a href="javascript:;" onClick="formatText (PostRawContents,'u');"><u>U</u></a>
<form>
<input type="text" id="PostRawContents" name="PostRawContents" value='blah blah blah'>
</form>
</body>
</html>
Nothing so far, sorry (i.e., same problem). To be honest, I am not seeing what’s different in the post immediately above versus the post from an hour ago… I don’t read and write this stuff, I steal it and try to make it functional through trial and error and other folks’ assistance, so it will help if you’re extremely explicit about what I need to change.
I assume the functionality of this isn’t in any way dependent on the presence of value=‘blah blah blah’ 
meanwhile…
I can, if you can give me more details about what details you need!
(I could of course post the entire page code)
ETA: I did the F12 thing after attempting to use one of the buttons, but I get a mixture of text and graphic display in a tabbed and multi-sectioned results screen popping up in a new window and not sure what it means or what to do with it. It isn’t saying “Dude you got an error type 3281 on line 19” or anything. (Brave, MacOS)
RE-Edit: on 2nd thought, this is probably the most relevant F12-generated stuff, yes?
I screwed up the placement of </head> and left out </html> in the first sample.
Are you saying that if you paste the exact text of my second sample into a text file, with nothing else, it fails to work on Firefox/Chrome/Edge? Because I have tried on all three and it works fine.
It’s not dependent on the “blah blah blah”; that’s just the sample text I used. (the fact that it repeats exposes the bug in replace(), but that’s not relevant to your browser dependence)
BTW, I highly recommend using a diff tool, if you aren’t already using one. WinMerge is a decent free one. It’s not that relevant to your problem, but would have made obvious the difference between my first and second samples.
No, of course not. I’m trying to get it working in the context I want it working in. I’m editing the web page that isn’t doing as I wish it to.
Ok, it doesn’t like where you’re defining the formatText function. Is it in a <head></head> section?
No, it’s within the body.
Should I move it to the head?
ETA: the javascript for inserting smilies, which is immediately below it in the same section, works fine everywhere I’ve tried it.
ETA 2: I'm wrong, it *is too* in the <head> section.
Key to debugging is to reduce your problem down to the simplest possible version that reproduces it. My sample is just the functions you specified in the OP with an additional input field. Since that works, the problem isn’t in the code you provided–it’s something else.
Yes; with few exceptions, you should always put your JS code in a <head> section.
That is to say, THIS is in the <head> section:
<script type="text/javascript">
function formatText (el,tag) {
var selectedText=document.selection?document.selection.createRange().text:el.value.substring(el.selectionStart,el.selectionEnd);
if (selectedText!='') {
var newText='['+tag+']'+selectedText+'[/'+tag+']';
el.value = el.value.slice(0, el.selectionStart) + newText + el.value.slice(el.selectionEnd);
}
}
</script>
Ok. That should be fine, then.
However, it still appears that for some reason, the formatText function is not being defined by the time it’s being referenced. It may be that the browser is completely failing to parse it as Javascript (for any number of reasons: missing/misspelled tags, embedded within comment tags, etc.).
Is that the only error you see in your console log? How about other browsers?
In your example the input type is “text”; on my actual page the element is a TEXTAREA (rows=16 cols=80). Is that deprecated or anything problematic or troublesome?
Both text and textarea work fine for me. I don’t think either is deprecated. This is fine:
<textarea id="PostRawContents" name="PostRawContents" rows="4" cols="60">
blah blah blah
hello, world!
</textarea>
Firefox:
Uncaught SyntaxError: expected expression, got '<'
[editRecord.php:16](http://fmcalico.no-ip.org/~ahunter/FmBoard/editRecord.php?recid=252)
Cookie “TheRecID” will be soon rejected because it has the “SameSite” attribute set to “None” or an invalid value, without the “secure” attribute. To know more about the “SameSite“ attribute, read https://developer.mozilla.org/docs/Web/HTTP/Headers/Set-Cookie/SameSite [editRecord.php](http://fmcalico.no-ip.org/~ahunter/FmBoard/editRecord.php?recid=252)
Uncaught ReferenceError: formatText is not defined
onclick http://fmcalico.no-ip.org/~ahunter/FmBoard/editRecord.php?recid=252:1
Rogue tag somewhere, then? What is on line 16?
The other day, YouTube had a rogue < in their code. When you visited their site, it would appear for a fraction of a second before the rest of it loaded.
BTW, browser conformance is pretty good across the board these days. However, what differs is what happens when you do something nonconforming. They don’t always fail in compatible ways, and some may be looser in how they interpret non-conforming code than others. Safari is really the problematic one here, as there is clearly an error that it is silently ignoring. This is one of the ways Microsoft behaved in the bad old days of Internet Explorer, where broken code that happened to work anyway on IE was actually broken on other browsers.
Line 16 in its entirety:
<script type="text/javascript">