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);
Related
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)
I have this HTML code with pre-written message. My goal is to highlight text between [quote] [/quote] in a yellow background once I focus/click on the text area.
<textarea>
This is a test message.
[quote]Wise man said he is wise.[/quote] There could be more quotes too:
[quote]this is second quote [/quote]
He is correct.
</textarea>
Is it possible to do it with pure Javascript? I think it should be something like:
textarea onfocus="function()">
find text between [quote][/quote]
apply yellow background to found text: background Color='#ffc'
....
(and if there is no [quote] [/quote] found then it should do nothing, ie. no warnings).
Since you cannot do that using <textatea> i'd suggest to take a look at
<div contenteditable>
</div>
here's an example:
var area = document.getElementById("area");
var text = area.innerHTML;
area.innerHTML = text.replace(/\[\s*quote.*\](.*)[^[]*\[\s*\/quote.*\]/ig, "<span>$1</span>");
[contenteditable]{
white-space:pre-wrap;
}
[contenteditable] span{
background:#ffc;
}
<div id="area" contenteditable>
This is a test message.
[quote]Wise man said he is wise.[/quote] There could be more quotes too:
[quote]this is second quote [/quote]
He is correct.
</div>
Otherwise, since you cannot treat HTML elements inside a textarea like actual HTML elements in order to highlight them → you should create an in-memory element with the same size (font-size etc) of your textarea, do the above, calculate the positions of the generated span elements, than apply some higlight overlays over the respective positions over your textarea, take care that they "follow-up" if the window resizes... and the story goes...
Here's a jQuery plugin to achieve the above-mentioned:
http://mistic100.github.io/jquery-highlighttextarea/
Currently I'm investigating two approaches: Highlight Text Inside a Textarea, which describes how this plugin is done: https://github.com/lonekorean/highlight-within-textarea
And syntax higlighter for MediaWiki: source, description of approach.
Both of them use additional element behind textarea with the same font and positioning to show background colors. Textarea background is made transparent. Then on edit and scroll you sync contents and scroll between textarea and element behind.
Here is my simplified code for it: https://codepen.io/bunyk-1472854887/full/RLJbNq/
Core logic of the highlighter is like this (some details skipped):
textarea.addEventListener('keyup', textUpdate);
textarea.addEventListener('scroll', scrollUpdate);
function textUpdate() {
var html = html_escape(textarea.value);
enter code here
html = html.replace(/\[quote\](.*?)\[\/quote\]/g, '[quote]<span class="quote">$1</span>[/quote]');
background.innerHTML = html;
}
function scrollUpdate() {
background.scrollTop = textarea.scrollTop;
};
I have one input field that facilitates a person having a conversation but playing both roles in the convo. I want to get as close as I can to what its like to have a text conversation, but I cannot seem to sort out how to style the text when it comes through.
As of the moment, the user types the text and hits one of two buttons, each is loaded with the following function to pull the text, create a div, text node, append them and place in the page.
I tried styling the initial input but that simply makes the input field styled, does not affect the actual output.
I tried adding style at each step of the way, to the variable I saved the input in, to the p, the div, the text node, and after placing it in the doc... each time the function failed.
I tried the attribute method and an innerhtml approach.
What would work? At minimum I would love the function to bold and right align the text. Next best would be to append it with the contents of an ng-app so it says Me: (text here), then My future self: (text here)... which I sense would just involve a string set to a variable.. but setting x = {{name}} caused the function to fail..
I know theres a way to use firebug to understand these failures, but I am not quite understanding that yet. Any suggestions?
<script>
function changeTextComment4(destination){
// to be modified from the above to change the location of the dump
// this function ADDS a comment from the comment field to the div w id comment near it...
var userInput = document.getElementById('userInputS1').value;
// get the input from the user
// 3 make the div a panel
var para = document.createElement("P");
// assignment of attributes
var t = document.createTextNode(userInput);
para.appendChild(t);
// add comment area
// place the item
var destination = document.getElementById(destination)
destination.insertBefore(para, destination.firstChild);
document.getElementById('userInputS1').value = "";
document.getElementById('userInputS1').focus();}
</script>
you can add style by referring to the selector
#userInputS1{
color : #F00;
}
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/
i have a div that contains some html and text (html is added dynamically)the structure would be like
<div id="contentContainer">
<span>ProductA</span> ; <span>ProductB</span>; prod
</div>
i want to remove the last incomplete text (prod) from the inner html of the div contentContainer on submit button click
for this i was using regex returnText.replace(/\w+$/, ''); and it works fine
as i can not trim the text to last index of ';'
but not the issue is when user puts some special charaters in the incomplete text as pr\od
the regex fails
so is there any solution to trim the last appended text the inner html of the div
or can i trim the text to the last html tag and place ; after that
please suggest any solution
if you are using jquery you can pull out all span elements and replace innerHTML with them.
$("#contentContainer").html( $("#contentContainer span") );
That should clean rest things. Maybe not the best but i think its better then regexp on content.
Solution looks at the last DOM node in DIV, if it is a text node it changes text to semi-colon
var lastNode = $('#contentContainer').contents().last()[0]
if (lastNode.nodeType == 3) {
lastNode.textContent=';'
}
demo: http://jsfiddle.net/EhcLh/