Develop Reference

javascript: how to use a hidden tag to direct text update of larger object without line breaks added?

Of course, we can update all the text of an object like this:
document.getElementById(objId).innerHTML = "some text we like";
What I'm looking to do is update a subset of existing text, with the target to be replaced being identified by a hidden tag. So, for example instead of having to parse something like this in my own code:
<p> Here's a huge block of text, many lines long and
**here's the part I want to update,** buried within it and yet there's even more afterwards.</p>
...instead I want to (and can) do something like this:
<p> Here's a huge block of text, many lines long and <option id="target">**here's the part I want to update,**</option> buried within it and yet there's even more afterwards.</p>
...And then update that with:
document.getElementById("target").innerHTML = "replacement text we like";
Unremarkably, this works, BUT, it has the effect of adding line breaks, as if there was a <br> tag where there's <option> and </option>.
Here's the EFFECTIVE result of that call:
<p> Here's a huge block of text, many lines long and<br> replacement text we like<br> buried within it and yet there's even more afterwards.</p>
How can I do this WITHOUT the line breaks being inserted?

You can do this with a <span> tag instead of a <div>. Here is a working JSFiddle.

Elements like <option> or <div> are block elements. You need to use an inline element so you can use <span> instead of <option>:
function myFoo() {
document.getElementById("target").innerHTML = "replacement text we like";
}
<p> Here's a huge block of text, many lines long and <span id="target">**here's the part I want to update,**</span> buried within it and yet there's even more afterwards.</p>
<button id="btn" onclick="myFoo()">Change Text!</button>

Backspace while in ContentEditable DIV in front of first character exits containing element

I have an encapsulating span tag around some text which is all inside a content editable div.
Hello <font id="ud_First Name">Bryan</font>
The problem occurs when a user places the cursor directly to the right of the first letter inside this span tag and hits backspace to delete it, then types another character in its place.
Hello B<font id="ud_First Name">ryan</font>
While it properly deletes it and visually appears to add the new character in the right place, inspection of the source in chrome reveals that it is actually placing the new character OUTSIDE of the span which wreaks havoc on our user edits tracking.
I tried many different things but cannot get it to keep the cursor inside the span tag in this case under any circumstances.
Interestingly, HIGHLIGHTING the first character and then typing in place (replacement) keeps the cursor inside the span tag and it works as you'd expect.
Any ideas how to get the desired behavior (hopefully) simply?

I have the same problem (at least in chrome). interestingly enough, the same pattern inside a or a doesn't give the same problem.
my HTML is
<div ... contentEditable=true>
<h1>my title <span class="EMBEDDED">embedded content</span> end of title</h1>
</div>
the problem is that the user (in some cases) is not able to put the cursor before the e of "embedded content"
I don't have a proper fix now but in order to make sure the user at least sees the problem I used in css a
.EMBEDDED {
background-color: #ffb848;
display:none;
}
.EMBEDDED:before {
content:"{{"
}
.EMBEDDED:after {
content:"}}"
}
if I find a better solution I will come back

Script insert line breaks in div contentEditable

I have a webpage div with contentEditable=true. After the user modifies the content of the div, the system uses document.getElementById(id).innerHTML to get the content and send it to server. This is all working:
<div id='editBox'; contentEditable='true'></div>
<script>
document.getElementById('editBox').onkeydown=function(e){
clearTimeout ( backupTimeoutID );
backupTimeoutID = setTimeout(function(){sendDivContentToServer()},3000);
}
<script>
the reason I'm using the a div with contentEditable=true instead of text area is that I need to allow displaying and formatting of background-colored text in the div. If I'm unaware of any better way, please, let me know.
My problem is with the inconsistence with which line breaks are displayed. If the user presses return inside the div, it creates another div for the line break. So, when the function gets the innerHtml, it looks like this
first line of text<div>second line of text</div>
Sometimes, when pasting text from other sources in the edit box (from internet, word, etc), line breaks appear as <p>.
I want all line breaks to look like this:
first line of text<br>second line of text
I have tried changing the behavior of the <div> whenever the user presses return; I know the code is working, for if I try to insert a word instead of return it works. But, when I set the code to substitute return for <br> it acts erradically. This is the code I'm using for this:
<script>
document.getElementById('editBox').onkeydown=function(e){
clearTimeout ( backupTimeoutID );
backupTimeoutID = setTimeout(function(){sendDivContentToServer()},3000);
}
} else if ( pressedKeyCode==13 ) {
e.preventDefault();
document.execCommand("InsertHTML",false,"a"); // this works
document.execCommand("InsertHTML",false,"<br>"); // I don't see the effects I want with this
}
<script>
Converting the multiple line breaks – <div>, <p> and <br> – seem to be a hard task. Using <br> for line breaks seems less error prone.
I'm developing for a web viewer in FileMaker for use in Mac OSX. So, so far, I care more about Safari than any other browser.
Thanks, in advance, for the help.

Reining in contentEditable is not an easy task. Unfortunately it's not really standardized and every browser has its quirks.
I would suggest you have a look at the many well written HTML rich text editors that are around.
For example, CKEditor only creates sensible, valid HTML, it allows you to configure what happens, when the user presses return, it can remove or replace any unwanted HTML and you can disable any features that the user shouldn't use.

Display div on mouseover, containing html code (<br>)

I'm trying to display the content of myPosters array, that contain HTML code.
However this HTML code is not seen as HTML because it was created according to some gwt code which is understandable.
This is how the code is presented: This is a Title <br> This is a Description
And instead of this <br> I want to convert it, and insert a "real" break line.
I already tried to "convert" that code inside photoCaption div to text() and then to html(), using: $('#photoCaption').text($('#photoCaption').html());
But in this case instead of <br> I got <br>
How can I get rid of this, and present the information as "real" HTML code?
NOTE: Move your mouse over the first image to see the problem!
It should also been taken into account that there is an "image slider" in the real code, and it changes the image presented and the respective photoCaption content.
JSFIDDLE

Just change this line
$('#photoCaption').text(myPosters[0]);
To this
$('#photoCaption').html(myPosters[0]);
Fiddle
EDIT
I read your comment on another answer, try this, then:
http://jsfiddle.net/mgJLp/25/
Basically what it does is fix the text on mouse over, and keeps track of whether it's fixed, because otherwise it'll keep trying to fix while you move the mouse, which removes the line break completely.

you were not far off with your jquery, the following works in your fiddle: $('#photoCaption').html($('#photoCaption').text());

You're escaping in the wrong direction.
You need to set the HTML of the target to the text of the source.

Related to your JSFIDDLE, use:
var myPosters = ["This is a Title \<br\> This is a Description","Title 2"];
and
$('#photoCaption').html(myPosters[0]);

How do I select all text contained in <pre> using jQuery?

I have a contentEditable iframe with line numbers and text. The line numbers are contained in a div and all text is in a <pre>-element.
It looks like this:
<body>
<div id="line_numbers">
<div>1</div><div>2</div><div>3</div>
</div>
<pre>
Text
</pre>
</body>
Now, when someone presses Ctrl+A everything is selected, including the line numbers. I would like to change this behaviour to only include the contents of the <pre>.
I have set up a function that captures Ctrl+A and prevents the default operation. Now, how do I set the selection to contain everything within the <pre>?

This answer will help you out I think; you should be able to select the pre element using jQuery and pass it into the function supplied:
SelectText($('pre')[0]);

Have you $("#iframe_id").contents().find('pre').text()?