I have html like so:
<div class=foo>
(<a href=forum.example.com>forum</a>)
<p>
Some html here....
</div>
And I want to insert another link after the first one, like so:
<div class=foo>
(<a href=forum.example.com>forum</a>) <a href=blog.example.com>blog</a>
<p>
Some html here....
</div>
...but because it is enclosed in () I cannot use:
$('div.foo a:first').append(' <a href=blog.example.com>blog</a>');
...which would place it before the ).
So how can I extend my jQuery selection to select the literal ) or do I need to use another solution?
You can either match and replace the whole (<a />) string, or place another element (such as a span) around the whole thing.
<span>(<a href=forum.example.com>forum</a>)</span>
Append is also inserting the new anchor tag inside the existing anchor. You'll probably find you're looking for after()
Could you possibly select the next <p> tag and prepend (actually...use the before method) the link?
$('div.foo a:first').next('<p>').before(' <a href=blog.example.com>blog</a>');
One should never modify XML/HTML (especially untrusted/illformatted) by regular expressions, but if you are really desperate:
var container = $('div.foo');
var append = '...';
var html = container.html();
var replaced = html.replace(/\(<a [^\)]+\)/, "$& " + append);
container.html(replaced);
Note that the above will fail if you have ")" character inside a-tag.
Related
I recently started learning/using about RegEx.
Is there a way to avoid matching words that are HTML tag attributes or belonging to tag attributes?
For example:
<p style=“position: absolute”>position: </p>
I tried
/\bposition\b\W\s/g
But that matches both instances.
Can I only match the second “position: “?
Clarification:
I am trying to search the document for words that the user enters and replace them with a span element containing those words - this is similar to "Ctrl + F". Simply having the text is not enough as I would need a way to also update the document once the text was replaced with the span elements.
Disclaimer: Use stuff like document.innerText and other DOM APIs rather than Regex.
Match HTML tags:
<.+?>/g
Match everything within HTML tags (should handle nested ones as well):
/(?<=<.+.>)(.*?)(?=<.*\/.+.?>)/g
https://regex101.com/r/2uZHli/ for example of the above.
The RegEx to match the HTML / XML tags is /(<([^>]+)>)/ig. Maybe be this is what you're looking for.
let str = '<p style="position: absolute">position: </p>';
const strWithoutTag = str.replace(/(<([^>]+)>)/ig, '');
console.log(strWithoutTag);
You can try the Regex to match your temp, which matched the second "position: ".
/(?=\b.*(?<yourKeyword>position).*\b)(?<=<[^]*>)([^<>]+)(?=<\/([^<>]*)>)/g
What I want to do is replace what is in between two HTML tags.
I'm using this as a reference but I'm still encountering problems:
REFERENCE
This is what I've tried:
el.getValue().replace(/<form.+<\/form>/, "<div></div>");
I need to replace all my form tags dynamically.
If you use jQuery, just retrieve the parent element of what you'd like to be replaced, and replace the content with the .html() function.
Ex:
var formParentElement = $('#formParentElement');
formParentElement.html("<div>my new content</div>");
If you don't use jQuery:
var formParentElement = document.getElementById("formParentElement");
formParentElement.innerHTML = "<div>my new content</div>";
The example assumes the parent element of your form has an ID with value "formParentElement".
Yeah. I found a solution.
el.getValue().replace(/<form[\s\S]*?<\/form>/, "<div></div>");
Explanation by #[James G]:
[\s\S]*? means [any character including space and line breaks]any number of times, and the ? makes the asterisk "not greedy," so it will stop (more quickly) when it finds </form>.
Reference
I work on my angularjs project.
I have this string in my controller:
"Open In Waze"
And I have this div in my template:
<div id="wazeArea" ng-init="editor.appandWazeLink(editor.siteId)"><i class="fa fa-car" aria-hidden="true"></div>
How can append anchor element above to div to make it clickable?
This frustrated me a few times as well. You should be able to just embed the string name into it like this:
var htmlStringFromController = "Open In Waze";
And then call it from there.
<div id="wazeArea" ng-init="editor.appandWazeLink(editor.siteId)">{{htmlStringFromController}}</div>
The problem here is that angular doesn't want to inject raw HTML, right? So you can use $sce to accomplish that (AngularJS : Insert HTML into view)
But the question is, could you just inject the URL into an anchor tag that already exists in the div? Like this:
// controller code:
var URLFromController = "http://waze.to/?navigate=yes&ll=72.0274, 564.7814";
And then use this in the view, only displaying it if URLFromController is truthy.
<div id="wazeArea" ng-init="editor.appandWazeLink(editor.siteId)">
<a ng-if="URLFromController" href="{{URLFromController}}" target="_blank">Open in Waze</a>
</div>
// 1. get the parent of the div
// 2. append the anchor to it
$("#wazeArea").parent().append($(string));
// 3. move the div inside of the anchor by appending it
$("#id_of_a").append($("wazeArea"));
document.getElementById("wazeArea").appendChild(Anchor element in single quotes ' ');
You can use single quotes while making html string. It can allow double quotes inside that without need of escape characters
<nav class="woocommerce-breadcrumb">Home > Product</nav>
Using jQuery or Javascript how would I be able to rename the word 'Product' to some other value?
var brandname = $('.tax-product_brand h1.page-title').text();
var crumb = $('.woocommerce-breadcrumb').text();
console.log(crumb);
crumb.replace("Product", brandname);
I tried the above with no luck
Use .html() rather than .text() or else you'll lose your markup:
var crumb = $('.woocommerce-breadcrumb').html();
Then apply the value back to the element:
$('.woocommerce-breadcrumb').html(crumb.replace("Product", brandname));
Alternatively, a much easier way would be to put "Product" in its own element, and then just replace that element's text:
<nav class="woocommerce-breadcrumb">Home > <span class="item">Product</span></nav>
Then your jQuery would simply be:
$(".woocommerce-breadcrumb .item").text(brandname);
You then need to insert your string into the DOM. As it is, you're just doing a string operation and discarding the return value.
$('.woocommerce-breadcrumb').text(crumb.replace("Product", brandname));
EDIT: As mentioned in a comment, you should use .html() instead of .text(). .text() will strip all of your HTML, i.e. your <a> tag.
.replace returns a new string, so you have to set the text of crumb with the returned string.
Its replaced Here is demo.
var brandname = 'My Name';
var crumb = 'My Product';
console.log(crumb);
var d= crumb.replace("Product", brandname);
alert(d);
var brandname = $('.tax-product_brand h1.page-title').text();
$(".woocommerce-breadcrumb:contains('Product')").html(function(_, html) {
return html.replace(/(Product)/g, '<span>'+brandname+'</span>')
});
I was able to use the above to gain what I wanted whilst keeping the formatting of the a tag
Avoid using free text. This will increase processing overhead, when you'll do DOM calculations.
It is good, if you can use tag to display the end product/page name.
The html will look like:
<nav class="woocommerce-breadcrumb">
<a href="http://domain.com/" class="home">
Home
</a>
<span class="currentPage">>Product</span>
</nav>
Now, you can use simple DOM operation to change the text() of expected element.
var currentPage=$(".currentPage");
$(currentPage).text('> NewText');
Hi I am using the following code :
breakContent = breakContent.replace(/<div>/g, ' <div>');
Here breakContent is a string that contains html code. I need to provide space before div tag.The above code works fine for div without any attribute like id, style,etc...
So what I need is the working code including attributes in div tag...
I tried the below code..but it does not give space before div and instead it replace the div with space
breakContent = breakContent.replace(/<div\s*[\/]?>/gi, " ");
Just change it to:
breakContent = breakContent.replace(/<div/g, ' <div');
Removing the trailing > will allow for <div> tags with attributes.
EDIT: Of course, this could pick up text that isn't actually a <div> tag, if you have text matching <div that isn't a tag.