Put a quote in a HTML attribute - javascript

example,
<span class="hotspot"
onmouseover="tooltip.show('<table id=\"test\"><tr><th>123</th></tr><tr><th>123</th></tr></table>');"
onmouseout="tooltip.hide();">porttitor orci</span>
in here, i'm trying to add id attribute in table tag, but i already used "" and '', so something is messed up and not working.
Any good solution?

<span class="hotspot"
onmouseover="tooltip.show('<table id="test"><tr><th>123</th></tr><tr><th>123</th></tr></table>');"
onmouseout="tooltip.hide();">porttitor orci</span>
JSFiddle

In an attribute value that is delimited by Ascii quotation marks ("), you can present the Ascii quotation mark itself using the reference ".
However, there is usually a better way. In the given case, you can simply omit the quotation marks, since id=test works just fine (unless you are using XHTML served with an XML content type, and most probably you aren’t).

Related

replace \n from tag attribute using javascript regex with empty character

I have tag like <span style="font-size:10.5pt;\nfont-family:\nKaiTi"> and I want to replace \n within tag with empty character.
Note: Tag could be anything(not fixed)
I want regex expression to replace the same in the javascript.
You should be able to strip out the \n character before applying this HTML to the page.
Having said that, try this (\\n)
You can see it here: regex101
Edit: A bit of refinement and I have this (\W\\n). It works with the example you provided. It breaks down if you have spaces in the body of the tags (<span> \n </span>).
I've tried everything I know to do. Perhaps someone with more regex experience can assist?

Change text of button based on attributes

i have searched stackoverflow but i did not find any answers.
Please Check below html
<button type="button" class="nacnchor" value="1">hello</button>
<button type="button" class="nacnchor" value="2">hello</button>
<button type="button" class="nacnchor" value="3">hello</button>
I can change text of button based on class
$('button.nacnchor').text("REWRITE");
But i want to change the value based on attribute value , is ther anything like $('button.nacnchor,attr(value=1)') :p .
Attribute selectors are documented here: http://api.jquery.com/attribute-equals-selector/
$("button.nacnchor[value='1']").text("REWRITE");
You can do this:
$("button[value='1']").text("REWRITE");
When seeking how to use any given library it's always best to *R*ead *T*he *F*unny *M*anual which has an entire page dedicated to this.
...for example, $("a[rel='nofollow']"), will select Some text but not <a href="example.html" rel="nofollow foe">Some text.
Attribute values in selector expressions must follow the rules for W3C CSS selectors; in general, that means anything other than a valid identifier should be surrounded by quotation marks.
double quotes inside single quotes: $('a[rel="nofollow self"]')
single quotes inside double quotes: $("a[rel='nofollow self']")
escaped single quotes inside single quotes: $('a[rel=\'nofollow self\']')
escaped double quotes inside double quotes: $("a[rel=\"nofollow self\"]")
try the below code
$("button[value='1']").text("REWRITE");

jQuery match first letter in a string and wrap with span tag

I'm trying to get the first letter in a paragraph and wrap it with a <span> tag. Notice I said letter and not character, as I'm dealing with messy markup that often has blank spaces.
Existing markup (which I can't edit):
<p> Actual text starts after a few blank spaces.</p>
Desired result:
<p> <span class="big-cap">A</span>ctual text starts after a few blank spaces.</p>
How do I ignore anything but /[a-zA-Z]/ ? Any help would be greatly appreciated.
$('p').html(function (i, html)
{
return html.replace(/^[^a-zA-Z]*([a-zA-Z])/g, '<span class="big-cap">$1</span>');
});
Demo: http://jsfiddle.net/mattball/t3DNY/
I would vote against using JS for this task. It'll make your page slower and also it's a bad practice to use JS for presentation purposes.
Instead I can suggest using :first-letter pseudo-class to assign additional styles to the first letter in paragraph. Here is the demo: http://jsfiddle.net/e4XY2/. It should work in all modern browsers except IE7.
Matt Ball's solution is good but if you paragraph has and image or markup or quotes the regex will not just fail but break the html
for instance
<p><strong>Important</strong></p>
or
<p>"Important"</p>
You can avoid breaking the html in these cases by adding "'< to the exuded initial characters. Though in this case there will be no span wrapped on the first character.
return html.replace(/^[^a-zA-Z'"<]*([a-zA-Z])/g, '<span class="big-cap">$1</span>');
I think Optimally you may wish to wrap the first character after a ' or "
I would however consider it best to not wrap the character if it was already in markup, but that probably requires a second replace trial.
I do not seem to have permission to reply to an answer so forgive me for doing it like this. The answer given by Matt Ball will not work if the P contains another element as first child. Go to the fiddle and add a IMG (very common) as first child of the P and the I from Img will turn into a drop cap.
If you use the x parameter (not sure if it's supported in jQuery), you can have the script ignore whitespace in the pattern. Then use something like this:
/^([a-zA-Z]).*$/
You know what format your first character should be, and it should grab only that character into a group. If you could have other characters other than whitespace before your first letter, maybe something like this:
/.*?([a-zA-Z]).*/
Conditionally catch other characters first, and then capture the first letter into a group, which you could then wrap around a span tag.

escaped char generating "missing ) after argument list" error?

This little line of code here is from a shopping cart:
Add To Cart
Firebug's console shows: "missing ) after argument list". Clearly the ')' isn't missing! But I suspect it has something to do with the escaped char
'
since the other similarly formatted links without apostrophes in the name= argument are working fine.
Thoughts?
onclick="simpleCart.add( 'name=The Devil's Sneakers'...
Is an HTML attribute with the apostrophe escaped at an HTML level. It is exactly the same as saying:
onclick="simpleCart.add( 'name=The Devil's Sneakers'...
with the obvious problem with the string closing too early. HTML-escaping doesn't help you because the HTML-escape is only needed to encode the characters that are special to HTML. That would include a double-quote character but not a single quote, since you've used double-quotes to delimit the attribute value.
The apostrophe isn't special to HTML here, but it is to JavaScript. You need to use JavaScript string literal escaping, and in that kind of escaping you need backslashes:
onclick="simpleCart.add( 'name=The Devil\'s Sneakers'...
Either way, it's clear that escapes inside other escapes are really confusing and this is another good reason not to use inline event handler attributes. Instead, in plain JavaScript:
<button type="button" id="foo">Add to cart</button>
<script type="text/javascript">
document.getElementById('foo').onclick = function() {
simpleCart.add("name=The Devil's Sneakers", 'price=10', 'shipping=0', 'quantity=1');
};
</script>
(I used a button because what you've got isn't a link that goes anywhere. You can style it to look like a link instead of a button if you prefer, but it's better not to have a link if none of the normal affordances of links, like middle-click or right-click-bookmark make any sense.)
Escape apostrophes with \x27. This code should work:
Add To Cart
Try \' instead of '
It works well.
<html>
<body>
Add To Cart
Add To Cart
</body>
</html>

Regex replace string but not inside html tag

I want to replace a string in HTML page using JavaScript but ignore it, if it is in an HTML tag, for example:
visit google search engine
you can search on google tatatata...
I want to replace google by <b>google</b>, but not here:
visit google search engine
you can search on <b>google</b> tatatata...
I tried with this one:
regex = new RegExp(">([^<]*)?(google)([^>]*)?<", 'i');
el.innerHTML = el.innerHTML.replace(regex,'>$1<b>$2</b>$3<');
but the problem: I got <b>google</b> inside the <a> tag:
visit <b>google</b> search engine
you can search on <b>google</b> tatatata...
How can fix this?
You'd be better using an html parser for this, rather than regex. I'm not sure it can be done 100% reliably.
You may or may not be able to do with with a regexp. It depends on how precisely you can define the conditions. Saying you want the string replaced except if it's in an HTML tag is not narrow enough, since everything on the page is presumably within some HTML tag (BODY if nothing else).
It would probably work better to traverse the DOM tree for this instead of trying to use a regexp on the HTML.
Parsing HTML with a regular expression is not going to be easy for anything other than trivial cases, since HTML isn't regular.
For more details see this Stackoverflow question (and answers).
I think you're all missing the question here...
When he says inside the tag, he means inside the opening tag, as in the <a href="google.com"> tag...This is something quite different than text, say, inside a <p> </p> tag pair or <body> </body>. While I don't have the answer yet, I'm struggling with this same problem and I know it has to be solvable using regex. Once I figure it out, i'll come back and post.
WORKAROUND
If You can't use a html parser or are quite confident about Your html structure try this:
do the "bad" changing
repeat replace (<[^>]*)(<[^>]+>) to $1 a few times (as much as You need)
It's a simple workaround, but works for me.
Cons?
Well... You have to do the replace twice for the case ... ...> as it removes only first unwanted tag from every tag on the page
[edit:]
SOLUTION
Why not use jQuery, put the html code into the page and do something like this:
$(containerOrSth).find('a').each(function(){
if($(this).children().length==0){
$(this).text($(this).text().replace('google','evil'));
}else{
//here You have to care about children tags, but You have to know where to expect them - before or after text. comment for more help
}
});
I'm using
regex = new RegExp("(?=[^>]*<)google", 'i');
you can't really do that, your "google" is always in some tag, either replace all or none
Well, since everything is part of a tag, your request makes no real sense. If it's just the <a /> tag, you might just check for that part. Mainly by making sure you don't have a tailing </a> tag before a fresh <a>
You can do that using REGEX, but filtering blocks like STYLE, SCRIPT and CDATA will need more work, and not implemented in the following solution.
Most of the answers state that 'your data is always in some tags' but they are missing the point, the data is always 'between' some tags, and you want to filter where it is 'in' a tag.
Note that tag characters in inline scripts will likely break this, so if they exist, they should be processed seperately with this method. Take a look at here :
complex html string.replace function
I can give you a hacky solution…
Pick a non printable character that’s not in your string…. Dup your buffer… now overwrite the tags in your dup buffer using the non printable character… perform regex to find position and length of match on dup buffer … Now you know where to perform replace in original buffer

Categories

Resources