I've seen lots of questions about preserving line breaks in textarea inputs, but I need the opposite. I suspect the answer to my question is not going to be a good one, but...
I'm working with a preformatted e-card (in Convio, if that helps anyone). I can add any text and HTML I want, but the data that's coming in from the form is via Convio tags and can't be changed.
Here's what I'm talking about. The textarea input is:
Hello,
How are you?
This would come into the e-card as:
Hello,<br />
<br />
How are you?
In other words, it does insert the break tags, but it also puts in an actual line break after each tag. No problem, right? That will display properly since the email reader ignores the actual line breaks in the HTML, but unfortunately additional information is prepended to the textarea input, so what comes into the e-card is really:
A message from Mr. John Smith johnsmith#xxx.com.<br />
Hello,<br />
<br />
How are you?
With the name and email address coming from other fields in the form. This, of course, displays as:
A message from Mr. John Smith johnsmith#xxx.com.
Hello,
How are you?
Here's the issue: I hate that first line. I mean I really hate it. The info is already on the e-card elsewhere and I don't want it there. It's too unfriendly, it's visually unappealing on the e-card, it almost always wraps to a second line (which looks even worse, particularly without space between that and the first line from the textarea), and it just makes me want to cry.
If everything came in as a string without the actual line breaks, I'd have no problem slicing and dicing the text to remove the first line. I could edit the input form to remove the actual breaks in the textarea input, but those two line breaks after the "A message from..." message are killing me. I can't figure out how to make the input string palatable for javascript.
I am limited to javascript--yes, I know this would be simple to do in PHP, but I don't have that option--and my webmaster and I have pretty much come to the conclusion that we can't do what I want to do. I had to double-check, though, and I'd love for someone to prove me wrong.
grab the innerHTML of which ever element has the message, and substring out the first line.
http://jsfiddle.net/Q8gu8/4/
You can match a line-break using "\n" (or \r for a carriage return). So, if I have the following string:
Foo
is
An
Apple
I can remove the first line like so:
// assume the string is stored in variable `str`
str = str.replace(/^.+?\n/, '');
... which means I'm left with:
is
An
Apple
/^.+?\n/ is a regular expression which means: match everything up to and including the first line break.
You should be able to use a regex with replace()
See this fiddle.
HTML:
<div class="replace">
A message from Mr. John Smith johnsmith#xxx.com.<br />
Hello,<br />
<br />
How are you?
<div>
JS:
var haystack = $('.replace').html();
var regex = /A message.*/;
$('.replace').html(haystack.replace(regex, ""));
Output:
Hello,
How are you?
Note that this is using JQuery for the selector.
Related
I am creating a typing trainer page where the user can practice their typing. Consider the following:
HTML:
<div>
<input type="button" value="Start!">
</div>
<div id="cd">
<span id="time"></span> left!
</div>
<div data-placeholder="Some text goes here." id="ph">
<div contenteditable="false" id="ed"></div>
</div>
https://jsfiddle.net/y7nwju6p/8/
As the user types, the character turns blue if it's correct and red if it's incorrect. Everything works correctly, as long as the text isn't more than one line. See the following:
https://jsfiddle.net/nce4zqeu/30/
The problem is that I am replacing characters in the placeholder with spaces as the user types so that it looks like they are disappearing. Once this amounts to an entire line of spaces, the text wraps incorrectly. Is there any way to make it so that it wraps correctly?
Thank you for your help.
The problem with your current implementation is that you need to insert nonbreaking space, in this post (javascript nonbreaking space) I found out that '\xa0' is the raw char for non breaking space.
After modifying your snippet in the following lines (144 and 147) from "\u2008" to "\xa0" it worked like a charm.
Edit
I discovered two issues in this code snippet, the first one is that "\u2008" doesn't work as expected on firefox (the spaces dissapeared from the placeholder), so "\xa0" is better to use in this case (worked in chrome and firefox).
The second one, is the issue that the author describes in this question, the answer was to use:
word-break: break-all; // this does the job in firefox
word-break: break-word; // this does the job in chrome
These properties must stay in that order so firefox can use only the first one and ignore the second one (because is not supported), and chrome will understand both of them but will ignore the first one and use the second one (because of the cascading nature of CSS).
When someone pastes content copied from a website or even a word document, textAngular adds additional break <br> tags before and after the content.
I'm using textAngular like this:
<text-angular name="summary" ng-model="summary" ta-paste="trimTags($html)" required>
</text-angular>
What I'd like to do is somehow trim the leading and trailing <br> tags.
The first approach I tried was writing a regex that will trim 2 leading and trailing <br> tags.
/(\<br\s*\/\>)(\<\/?body\>)(\<br\s*\/\>)/g
This works, but the changes are NOT reflected in the text presented. Is there a way to pass this $html being pasted and reflect the changes after modifying it?
Alternatively, I tried the ng-change approach, with no luck since it pastes the actual code, sometimes mixing <br> and <p> tags it adds.
Another problem is that, you could paste something in the middle of the text, which makes detecting changes difficult and time consuming.
A silly overlook, if anyone has trouble with this, use the ta-paste and the regex from the question, and after modifying the content simply return it.
$scope.trimTags = function(content){
//process the content
return content;
};
If I grab some html from one element, then attempt to assign it as the text content of another element, newlines are not preserved (at least not in the latest Firefox and Chromium).
So, for example, the follow code (with sensible html) produces output where the newlines are replaced by spaces. Well, except the alert, which works as expected.
$("#info").data("html", $("#info").html());
$("#jquery").text($("#info").data("html"));
document.getElementById("javascript").textContent = $("#info").data("html");
$("#alert").click(function() { alert($("#info").data("html")) });
Here's a running example: http://jsfiddle.net/76S7z/2/
There should be some method of setting the html of one element as the text of another while preserving newlines properly.
Is this possible with "text" or "textContent"? Is there an alternative way to do this? Is there a simple workaround? A less than simple workaround?
As you've already determined, Web browsers don't normally render newline characters \n as line breaks. If you're resistent to adding the line break element <br />, you can use the white-space CSS property with the value pre-line, which will:
Sequences of whitespace are collapsed. Lines are broken at newline characters, at <br>, and as necessary to fill line boxes.
Be sure to check the property's compatibility tables before using.
<div style="white-space: pre-line;">
Look
at
these line breaks!
</div>
Here's a JSFiddle example.
I'm having difficulties in executing what I want to achieve, it may just be sleep deprivation but it's more likely that regex is not my strong suit, I just can't quite get my head around it, but hopefully someone can give me a hand here.
I have the following string:
<span class="comment"><!--Some string\nsome other string\nsome more string--></span>
I need to format it so that it looks like this:
<span class="comment"><!--Some string</span>\n<span class="comment">some other string</span>\n<span class="comment">some more string--></span>
Now this would be really easy if this was the only string as I could do something like this:
/</span>\n<span class="comment">/gi
However the formatting should only happen if the corresponding open </span> has the class "comment" the other issue is that the open span tag with the class comment is not necessarily the first word of the string, there could be a string in-front of it and there could be infinitely many \n within the span...e.g. another variation could look like this:
<<span class="tag">string1\nstring2</span>><span class="comment"><!--string\nanother random string--></span>
No formatting should take place within the span with class tag, however formatting should take place in the span with class comment.
This is rather challenging for me to get my head around, the closest I have gotten is the following:
regex:
/<span class="comment">([^\<\/]*)\n/gi
replacement:
<span class="comment">$1</span>\n<span class="comment">
This gets close, as it formats the last line and first line within the span with class comment, but not the lines in between.
There may be javascript solutions to do this, but if at all possible I would prefer using regex.
Here you go,
str.replace (/<span\s+class="comment">.*<\/span>/ig, function (m) {
return m.replace (/\n/g, '</span>\n<span class="comment">');
});
Extract the span and its contents, then replace all the \n in that part.
i want to find a text named "footer= XXX" in a text document and replace the XXX with my own value. The problem here is that this footer value repeats in lot of areas in the document with different values assigned to it. Any idea of how to do it?
str.replace(/footer=(.*?)\s/g, 'footer=whatever');
See it on jsFiddle.
You didn't mention what the end delimiter is, so I used white space. You may want to use a word boundary (\b).