:contains incorrectly selecting child elements - javascript

Currently I'm trying to select a link element with the jQuery :contains selector. This works when the contents of the link is just text. but it seems that when the element contains other HTML elements the :contains selector selects a child element instead. Example
HTML:
<b> two</b> this not bold <b>This</b> is a bold Link
from that html, I'm trying to select the link using this selector
jQuery:
var selector = "a:contains('<b> two</b> this not bold <b>This</b> is a bold Link')";
var returnObj = $(selector);
Instead of getting one returned object (the link), jQuery returns three objects:
the first bold element
the text this is not bold
the second bold element
the problem isn't the single quotes within the contains(), as I've tried with and without them.
This is just a simplified example of what I'm trying to do. In reality, I'm dynamically creating selectors based off of a link object a user clicks. I then store that selector in a database for use later (for my app to display content related to that link). Since I can get the contents of the link, I figured I'd just use a:contents() if the link doesn't have an id.
based off of these pages, I seem to have my syntax right:
http://docs.jquery.com/Tutorials:How_to_Get_Anything_You_Want_2
http://api.jquery.com/contains-selector/
Thoughts on how to get the link object returned? Thanks!
hope this isn't too stupid a question, I'm new to JS and jQuery.

As mentioned, :contains() is meant to select by text content only, not inner HTML.
If you must match the a element based on that text, strip out the <b> tags:
var selector = "a:contains(' two this not bold This is a bold Link')";
Otherwise, see if you can simplify this selection by using a contextual selector (e.g. select based on its surrounding elements, parents, siblings, etc), or assign it a class and select by that class instead.
On a side note, I'd consider this yet another jQuery bug (could be a parsing error in Sizzle). In your situation, :contains() is not supposed to return or create any elements; it's supposed to return no matches simply because the selector doesn't match your a element. I suspect what it's doing instead is treating the <b></b> tags as new elements, and creating them on the fly along with your a element, which is wrong because the tags are inside the argument string and meant to be taken literally...

First of all your selector text does not match the actual text in your html.
The selector includes the this not bold which is not present in the html.
Most importantly the :contains works with the text only.. so you should check for
$("a:contains('two this not bold This is a bold Link')");
It is a very inefficient way though, and you should better add a class to the elements you want to target and use that for targeting..

Related

How to avoid breaking block level HTML elements from partial selection?

The problem in a nutshell is: given a wysiwyg editor (CKEditor) you want to make a plugin doing text transformation - select a piece of text and manipulate the text in it (eg uppercase). Example:
this is paragraph one
this is paragraph two
If bold represents your selection the result would be
this is paragraph ONE
THIS is paragraph two
This issue here is the selection will be a complete HTML fragment, even when a selection is no containing the full tag. The selected HTML is:
<p>one</p> <p>this</p>
Notice the first and last <p> tags. When you do your dom traverse in the selection html, apply the text transformation and replace the html it will use those partial tags, so your result become:
this is paragraph
ONE
THIS
is paragraph two
I checked if it's possible to "merge" the first and last partial tags with their dom parents, however the selection object is isolated, it doesn't have siblings or parents from it's original context.
Also tried to find an option to retrieve the selection without these auto-fixed tags, but no luck.
On the CKEditor documentation they mention a walker object - however that automatically expands from the selection to the full enclosing tag, which means the selection is only used as a minimum boundary.
Also because the selection object is isolated, it's not possible to just change the dom node text values there - the original dom fragment needs to be replaced (at least in case of CKEditor).
I tried not to stick with the CKEditor api as much as possible, however at this point I don't see any alternatives either. Is this is really a hard problem or I'm missing something?
One solution is to use the browser engine to mark the selected area with a tag (afaik that's a native operation). This is the same as you make your selection bold or italic - however here it's gonna be a temporary wrapper. Then you walk the DOM and replace the content in the temporary tags - and finally remove the tag (keeping the content).
This makes sure you can apply your transformation on the exact selection and by removing the tag you won't break the original DOM. Steps in a nutshell:
apply tag on selection (use the browser or wysiwyg api)
find all temp tags:
recursively walk the children of the tag
if tag is text node then apply transformation
otherwise recursive walk
collect tag's left sibling text node + tag's html + right sibling text node
replace tag's parent html with the previous compilation (=remove temp tag)
Not too elegant however works. This is inspired by #Andrew_Mast's idea about wrapping in a span.
I would loop through all of the word(s) and for each set of words inside a different tag, surround it with <span style="text-transform: uppercase;"> and </span>

Using jQuery to get the content of div.class to replace content of title tag

I need to work around a limitation on my company's platform where pages can only be rendered with the filename as the title. I don't want to change my file-names to have values like, "This page title with spaces, and maybe illegal characters", because I don't want my URLs to have a bunch %20's and illegal characters in them, so I've been trying to figure out how to use the contents of another section of the page over which I do have control - the breadcrumb - as the "title".
I've been trying to use jQuery's .get and .replaceWith to replace the contents of the title tag with the contents of span.ms-pagetitle, which contains the part I can edit, but I'm a jQuery noob, and just haven't been able to suss it out.
This ought to do it:
$('title').text($('span.ms-pagetitle').text())
This should be run only once; usually inside a $(document).ready() function. The .ms-pagetitle element ought to have no children.
Two things are going on here:
$('span.ms-pagetitle').text() first selects any items matching span.ms-pagetitle. Hopefully there is just one, but it will grab them all. Use :first or another more specific selector to get the one you want. .text() will
Get the combined text contents of each element in the set of matched
elements, including their descendants, or set the text contents of the
matched elements.
...hence the idea to keep the span childless.
So that will result in a string of text.
$('title').text('string') will set the contents of a selected tag when passed a string (and get when used with no argument), so you are setting the selected title text as the contents of the <title> tag here.

Working with a narrowed down DOM using jQuery

I am currently trying to figure out a way to work within a selected <div> in order to be able to send a text formatted email.
So there is a button says "email". When a user clicks on it, it grabs a closest div as below.
var selectedDiv = $(callingElement).closest(".myClassName");
And from there I would like to grab various dom elements to create a clean text format. So how do I work within selectedDiv using jQuery?
For example,
Getting <h1> value.
Getting <li> value with certain class names
Getting "title" attribute value.
The selectedDiv jQuery object wraps the div element. Use the find method to search for descendant elements, and attr to get the attributes on the div element itself.
selectedDiv.find('h1');
selectedDiv.find('li.someClass');
selectedDiv.attr('title');
Call the text() method to get the text from the h1, or the li.
selectedDiv.find('h1').text();
selectedDiv.children('h1').text();
selectedDiv.children('li.className').text();
selectedDiv.attr('title');
But somehow I think you might be asking the "wrong" question.

JavaScript String .replace method is replacing all my content?

I have successfully implemented finding and replacing some text with something else in the following way:
$(".class").html($(".class").html().replace(/\text\b/g, '<span class="newclass newclass2">new text</span>'));
When I apply this to my element 'class' it finds all the 'text' and replaces with 'new text' and everything relating to the new classes.
However, if I have more than one element on the page with the same class, it replaces all the classes with whatever text is in the first class.
For example, if my first class has the content "Hello everyone", when the script is applied to this class, it works fine. Any subsequent class of the same name is then replaced with "Hello everyone". These also have the function applied in the same way as the first occurrence of that class.
IE, it applies the script, then replicates this in every single class of the same name on the page.
I do not understand why it would do this, and rather renders the function pointless in many ways if it can't be used to change text throughout different sections without setting up new scripts and different classes.
Hopefully there is something simple at work here that I am not aware of, any help would be much appreciated.
Many thanks
Richard
That is the nature of class selectors--the .html(...) will replace the HTML of everything that matches the .class selector.
If you want to replace text in each individual .class element, you can use the .each function. (There are probably jQuerier ways, too.)
$(`.class`).each(function(n, el) {
var myHtml = $(this).html();
myHtml = mungeIt(myHtml);
$(this).html(myHtml);
});
If you want to select only an individual .class element, then you either (a) don't really want to be using classes, but IDs, or (b) need to understand enough of your structure or the context you wish to operate in to select only the targeted DOM element.
(And hope the structure or context doesn't change without a corresponding code update.)
You're specifying a class with the jQuery selector $(".class") That's what the period indicates. jQuery has a ton of selectors to choose from. A list is provided in the documentation here: http://api.jquery.com/category/selectors/
Also, I'd look at http://api.jquery.com/hasClass/ for your problem as you could then use if...then statements to not run into others
Dave is right about needing to use the .each method. We need to loop through each element at a time because .html() will only return the first element when there are multiple matches.
Try:
$('.class').each(function() {
$(this).html($(this).html().replace(/someWord/g,'withAnother'));
});

Parsing HTML in plain text or XML form

I have 2 questions:
1st Question: Can a HTML element have more than one class(be part of more than one class)?
<p class="paragraphClass" class="highlightClass"/> // is that allowed?
2nd Question: Is there a javascript HTML parser library or set of default functions that search a string of HTML & give me all the HTML elements that have a specific class? I use AJAX to get HTML from a server(returned as text not XML), I then need to convert all HTML elements that have the class "updatable" to text-area HTML elements.
What do you think would be the easiest way to convert all HTML elements of a specific class to textareas when I have a string of HTML as either text or XML.
1st Question: Can a HTML element have more than one class(be part of more than one class)?
Yes, but like this:
<p class="paragraphClass highlightClass"/>
2nd Question: Is there a javascript HTML parser library or set of default functions that search a string of HTML & give me all the HTML elements that have a specific class?
The dead-simplest way to do this is with jQuery (surprise, surprise):
var html = 'your html in a string here',
$html = $(html),
$elts = $html.find('.someClassName');
// $elts is a (array-like) jQuery object which
// contains all the elements in the HTML string with class 'someClassName'
See the jQuery selectors API docs for more.
You can have as many classes as you like on any element by seperating them with spaces. eg:
<p class="paragraphClass highlightClass"></p>
Use a library like jQuery to do this.
1) Yes, but your syntax is not correct. You can specify more than one class separated by spaces like:
<p class="paragraphClass highlightClass"/>
2) You could just insert your HTML into the DOM using some elements .innerHTML property. That element could have display: none; so that it doesn't affect your page. Then you can use normal DOM methods on them like document.getElementByClassName('updatable'); Note that getElementByClassName() is not defined in IE so you have to write your own that selects by tagName and then iterates through them matching the classes, or use a framework like jQuery.
there is always jquery. You can use the selector to select all the elements with that class and then convert it to a textarea. Sounds like you want to convert it to edit that paragraph.
$(".paragraphClass").each(function{
$(this).replaceWith("<textarea>"+ $(this).text() +"</textarea>");
})
http://jsfiddle.net/bQgN3/

Categories