Escaped characters in text area but not in list - javascript

I had some help on here to create this:
http://jsfiddle.net/spadez/ZTuDJ/38/
My problem comes from the fact that html is stripped out when putting the value of the responsibility field into the text area, but when adding it to the list it still has the HTML on. That means that if someone types in this:
<b>Testing</b>
When I type this in, I get this in the text area when it is stripped:
Testing
But in the list it still has the html tags so it looks like this:
Testing
This is my code which puts it in the text are and the list:
$('#responsibilities').text($("<div>" + eachline + "</div>").text() ).before("<li>"+lines+"</li>");
My question: How do I put the same stripped value which goes into the text area also into the list.

$('#responsibilities').text($("<div>" + eachline + "</div>").text()).before("<li>"+$("<p>"+lines+"</p>").text()+"</li>");
Demo ---> http://jsfiddle.net/ZTuDJ/40/

Related

how to wrap all matches of given string with html tag and append it to a template of a directive

Let's suppose I have a string like this:
Some text 321-ABC some text some text some text 761-DAW some text 612-AOS some text some text 733-OQA
It is passed to the directive scope. Now I want to display whole text with matches for /\d\d\d-\X\X\X/ wrapped with
<span ng-click=someFunction(matchedString)>matchedString</span>
How can I do this? What's the best practice?
Let' say your text is stored in text, and your div containing the text is called container.
The code of your container should be
<div ng-model="container" ng-bind-html="parsedText"></div>
Now in your code
$scope.processText = function() {
$scope.parsedText = $scope.text.replace(/([0-9]{3}-[A-Z]{3})/g, '$1');
};
This piece of code will replace every one of your codes with a link that you can click.
(I'm more of an Angular than AngularJS guy, so replace the link with whatever allows you to do what you want)

display values in XTemplate like textarea format

I am using the plugin rowexpander (grid) with the following template.
rowBodyTpl: new Ext.XTemplate('<div>'+
'<div>'+
'<b>Vegetables:</b>'+
'<ul><li>{vegetables_types}</li></ul>'+
'</div>'+
'</div>')
Displays vegetables types.
Items are sent to the server with a textarea field with each value separated by paragraph, creating a sort of list.
potatos
carrots
pumpkins
If I edit these values with a textarea, they are displayed in the textarea with the same format they were sent to the server (like a list).
However, with the XTemplate I just can display them on a single line.
potatos carrots pumpkins
I would appreciate suggestions to solve
EDIT:01-02-2016
FIDDLE: https://fiddle.sencha.com/#fiddle/14se
FIDDLE (solved): https://fiddle.sencha.com/#fiddle/14sf
The XTemplate creates HTML, while the text area uses formatted plain text.
HTML does show line breaks from the code as a single space only. HTML line breaks are made using <br> tag.
So you have to replace \n with <br> in your template for the line breaks to show up:
var rowBodyTpl = new Ext.XTemplate([
'<div>',
'<div style = "white-space: pre-wrap;">',
'<b>Vegetables:{[this.replaceBR(values.vegetables_types)]}</b>',
'</div>',
'</div>',
{
replaceBR:function(text) {
return text.replace(/\n/g,'<br>');
}
}
]);
I see two ways:
You can use tag <pre>. This tag shows preformatted text as is, with all spaces and new lines. (more see here: http://www.w3schools.com/tags/tag_pre.asp ). Here sample: https://fiddle.sencha.com/#fiddle/14il
You can make string array from vegetables_types string. It's best way I think. After it, you could use <tpl for="vegetables_type"> statement (look here: http://docs.sencha.com/extjs/5.1/5.1.1-apidocs/#!/api/Ext.XTemplate ). Here sample: https://fiddle.sencha.com/#fiddle/14sa

Simulate paste into Textarea with javascript

When pasting data from the clipboard into an html textarea, it does some pretty cool parsing to make the paste look close to what was copied as far as newlines go.
For example, I have the following html on a page that I select (everything highlights in blue) and then I copy it:
Hello
<br>
<br>
<br>
<div>more</div>
<div>last</div>
So to be clear, what I am copying is what the output of this jsfiddle looks like.
Now when I paste this magical, copied text into a text area, I see exactly what I would expect: "Hello", empty line, empty line, empty line, "more", "last". Cool! Then when I use jQuery's .val() on the textarea, I get "Hello\n\n\nmore\nlast". Super cool. It took the br's and div's and was able to infer the correct newlines from it.
Now...
What I am trying to do it programmatically take the same data I copied earlier and set it as the textarea's value as if it were pasted.
Here is what I have tried...
So, say the stuff I copied earlier was wrapped in a <div id="parent">...</div>.
var parent = $("#parent");
var textarea = $("#theTextArea");
// Set the value of the text area to be the html of the thing I care about
textarea.val(parent.html());
Now I know this isn't the same as a copy-paste, but I was hoping it would take care of me and do what I wanted. It doesn't. The textarea gets filled with Hello<br><br><br><div>more</div><div>last</div>. The html that was once invisible is now stringified and made part of the text.
Obviously I did this wrong. .html() returns, of course, the string of html. But is there something I could call on parent that would give me the text with all inferred linebreaks?. I have tried calling parent.text(), but this only gives Hellomorelast (no line breaks).
A few notes that could help with an answer: I am using Angular, so I have access to all their goodies and jQuery.
Edit:
Solution
It is not nice but you can try to replace html tags with line breaks '\n' or do some line breaks in the html file and get the content with text().
var parent1 = $("#paren1");
var textarea1 = $("#theTextArea1");
var parent2 = $("#paren2");
var textarea2 = $("#theTextArea2");
// Set the value of the text area to be the html of the thing I care about
var text = parent1.html();
text = text.replace(new RegExp("<br>", 'g'),"\n");
text = text.replace(new RegExp("<div>", 'g'),"");
text = text.replace(new RegExp("</div>", 'g'),"\n");
textarea1.val(text);
textarea2.val(parent2.text());
JSFiddle

Remove enclosing html tags from selection in textarea

I am working on a custom CMS and want to be able to select a section of HTML displayed for editing in a textarea and replace any enclosing tags with another tag. For instance, I may want to select a paragraph element and turn it into an h3 with one click, leaving any other tags untouched.
I have implemented rangyinputs to allow getSelection/replaceSelectedText operations on textareas, and so far I have this:
function add_html_tag(target_ID, replace_tag) {
$(target_ID).focus();
$(target_ID).replaceSelectedText('<' + replace_tag + '>' + $(target_ID).getSelection().text.replace(/(<([^>]+)>)/ig,"") + '</' + replace_tag + '>');
}
This works OK but it removes ALL tags from the target text, not just the enclosing ones so any other tags within the selected text would also be removed.
Any ideas, I think it will just involve changing the regex in the replace statement. Since the textarea contains just plain text I can't use jQuery methods such as unwrap. Obviously doing regex operations like this on HTML is error prone, but for now I will presume users select the text correctly!
this demo turns "A" tags into "LINK" tags; invalid, but shows the functionality you describe:
function add_html_tag(target_ID, replace_tag, new_tag_name) {
var elm=$("#"+target_ID).focus()[0];
elm.value=elm.value.replace( new RegExp("<(\\\/?)"+replace_tag+"\\b", "gi"), "<$1"+new_tag_name);
}
add_html_tag(textAreaID, "a", "link");

insert content to already inserted content

well, I'm stuck and hope that you can help.
I created a text-example and put it to the end of the post. Thank you in advance.
On a site there are e.g. 50 entries - like comments. Some p-elements in some of those entries are containing a special text. This is just a snippet how I get the special text.
$("p:contains('special text')")
I want to get the parent div-element, too and clone the special text and the div-text.
$("p:contains('special text')").parent("div").clone()
Also I want to insert the content a div-element with id=fortext:
$("#fortext").append($("p:contains('special text')").parent("div").clone())
Now, and that's the point where I'm stuck, there are some entries containing a list point. I get the listpoint this way:
$("li:contains('listpoint text'):last").clone()
I'm cloning the 'text' because the text would be removed from the entries.
The entry-list however starts with entry#1 and ends with entry#50.
It has a chronology. By cloning the p-elements content and inserting it in my div the chronology of the entries is adhered.
I wanted to add the listpoint(s) as well. If I use append like:
$("#fortext").append($("p:contains('special text')").parent("div").clone()).append($("li:contains('listpoint text'):last").clone());
The content of the li-element is inserted,yes, but after the inserted p-elements content.
How can I insert the li-elements content to the p-elements content? So that the chronological order of the entries is hold?
entry#1
special text 1
entry#2
no text
entry#3
listpoint text
entry#4
special text 2
//
My output is:
special text 1 div text
special text 2 div text
listpoint text
//
My output should be:
special text 1 div text
listpoint text
special text 2 div text
Edit
You can find the html-structure I'm referring to here
I don't totally grasp what you are trying to accomplish, but it seems to me it would be easier to just clone everything to maintain the order you want, and then prune out what you don't want.
Something like:
var $cloned = $(...).clone();
$cloned.find("p.some-selector").addClass("keep");
$cloned.find("ul.another-selector").addClass("keep");
$cloned.find("p,ul").not(".keep").remove();
$cloned.find("p,ul").removeClass("keep");
$("#fortext").append($cloned);

Categories