Newline character lost in IE8 textarea - javascript

I am trying to read text from a textarea in IE8 using some JavaScript, using the prototype library selector - "$F(text-area-id)"
The text I get out of this does not preserve the new lines present in the textarea. Is there any CSS properties I need to set for achieving this?
Thanks!

Without seeing any of your code (ahem), new lines are usually put in "automagically" by the wrapping on the text area. You can override this with white-space style.
Alternatively, you can search your string for the newline character \n which sometimes gets "lost in translation".

Related

Is there any way to change value of textarea with HTML

I'm trying to make markdown editor with auto resizable textarea.
I'm using marked library. But when I change value with value={marked(this.props.text)}, it outputs like: <p>Hello</p>
I can't even use dangerouslySetInnerHTML or innerHTML property since textarea doesn't render HTML.
When I use elements such as p, It doesn't look like textarea.
Can someone give me a hint?
I've solved it, see this post
In other to make the element look like textarea, you should translate a carriage return into a br html tag.
In this post:
You could just apply CSS white-space:pre on the element, exactly like the HTML textarea element is internally doing:
<span style="white-space:pre">your text \n will \n be \n on multiple \n lines</span>
Also read this comment - about carriage return

How to make a regex part "backwards lazy"?

Apologies for the terrible title, i don't know how to express this in short form.
I have a string containing html (text, some spans and some <br>s).
What i'm trying to achieve is to find the first span with a class ending "-focused". For added fun, the spans have line returns in the title attribute. However they do have a fixed structure and i can rearrange them if needed.
This is what i have so far:
<span[\s\S]*?class=".*-focused"[\s\S]*?>[\s\S]*?<\/span>
But i get a match from the start of the first span to the end of the matching span.
Here's a regex101 link to illustrate (contains example text)
https://regex101.com/r/W7YDU5/2
I tried playing with positive/negative lookaheads and capturing/non-capturing groups, but i'm more confused than anything at this point.
You should avoid using the first [\s\S] here. To get what you need, you may want to proceed within the same opening tag. That is implicitly done when matching everything except >:
<span[^>]*?class=".*-focused"[^>]*?>[\s\S]*?<\/span>
document.querySelector('span[class=$-focused]')
this should find the first span with a class ending with -focused

id.text() of jquery ignoring more than 1 white space in ie8

I have a span with id SOMEID.When I am accessing its text value using folloing code it is breaking in IE8 and IE7 only.How to fix it.
$("#DocumentPath").text(). If DocumentPath contain name like My doc.txt it is not working. Note here there is 3 white space between My and doc.
You very vague problem description "code it is breaking" can make us only guess, but note the following: IE treats whitespaces in the markup differently than other browsers.
From the docs:
(Due to variations in the HTML parsers in different browsers, the text returned may vary in newlines and other white space.)
The result of the .text() method is a string containing the combined text of all matched elements.
As of jQuery 1.4, the .text() method returns the value of text and CDATA nodes as well as element nodes.
Thus said, it may be more appropriate for you, to use the html() method.
Should be
$("#DocumentPath").html()
That said you say your span has an id SOMEID?! If it's id is SOMEID it should be:
$("#SOMEID").html()
Maybe you should try another approach, on jQuery's docs they recommend call .eval() function to retrieve a value instead of .text() check their doc:http://api.jquery.com/text/
So the code snippet could be:
$("#DocumentPath").eval()
Regards
:)

text in HTML becomes split / malformed in the DOM when elements are inserted around text and then removed (preserving the inner text, though)

So, here is normal text: just your standard paragraph.
I have javascript that will insert a span around selected text (for highlighting purposes).
The problem is that when I remove the span, the nice text block becomes chunky, and malformed:
How do I restore the block of text to its original state?
I think you must to keep the original node, and replace it cloning the innerHTML with your span-wraper. Then just replace the nodes.
Instead of removing the span, try replacing the content of the standard paragraph with its original data.

Alternative for execCommand('underline');

Okay, some Guys will know what i mean and edit my Question but they did it wrong.
A better explanation:
You have a contenteditable div with the text This is a Test String..
If you use now the execCommand('underline') on Test String you get This is a <u>Test String</u>
if you use now the execCommand('strikethrough') on is a Test you get This <s>is a <u>Test</u></s><u>String</u>, THIS is correct.
So, in HTML5 <u> and <s> are obsolete.
For the first execCommand you can use the surroundContents() with a <span style="text-decoration:underline;">. If you now use the surroundContets() for the second execCommand you receive the BAD_BOUNDARYPOINTS_ERR.
The Thing i want is a Function which works like the execCommand in this case but with functions where i can define with witch HTML-Tag the String will wrapped… (It should be intelligent in the case if there is any overlapping…)
The surroundContents() will have problems: if the selection encompasses multiple block elements, such as <div>s or <p>s, the surrounded contents will be placed in a new block, breaking it out of its original position. To overcome this, you could easily adapt my answer here: apply style to range of text with javascript in uiwebview
You'll need to do the following:
Create a CSS class with the rule "text-decoration: underline;"
Add an intersectsNode method of Range for browsers that don't have it, such as Firefox (see MDC for an example: https://developer.mozilla.org/en/DOM/range.intersectsNode)
If you care about IE, you'll need to write a completely different solution.
CSS text-decoration: underline.

Categories

Resources