This question already has answers here:
Need to escape a special character in a jQuery selector string
(7 answers)
Closed 4 years ago.
I'm trying to select an element this way
$('#QR~QID345')
because the element's id is QR~QID345 but the selector doesn't work with ~, is there any fix?
Changing the id is not an option in this case.
You can escape ~ with \\
alert( $('#QR\\~QID345').text() );
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="QR~QID345">Hello</div>
You can use $.escapeSelector to escapes any character that has a special meaning in a CSS selector.
var id = $.escapeSelector("QR~QID345");
console.log($('#' + id).text());
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p id="QR~QID345">
Hello World
</p>
As been noted by Rory McCrossan on the comment, $.escapeSelector was added on version 3.0
Doc: $.escapeSelector()
Related
This question already has answers here:
jQuery selector regular expressions
(10 answers)
Closed 4 years ago.
I want to get all elements that class contains a number, how can I do that?
I haven't tried anything because I don't really know how to think about it.
This might be related to this question: jQuery selector regular expressions
Using the regex functionality from this page, you should be able to do something like this:
$(':regex(class,.*[0-9].*)');
This can be done by iterating over all desired elements, keeping only those where the className attribute matches a given regex.
var divs = $('div');
var regex = /\d/;
var result = divs.filter(index => regex.test(divs[index].className));
result.each(index => console.log(result[index]));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="x1" class="a"></div>
<div id="x2" class="a1"></div>
<div id="x3" class="2a"></div>
<div id="x4" class="3"></div>
<div id="x5" class="bc"></div>
<div id="x6" class="x4y5z"></div>
This question already has answers here:
Using querySelector with IDs that are numbers
(9 answers)
Closed 6 years ago.
The following code returns the console error:
"Uncaught SyntaxError: Failed to execute 'querySelector' on 'Document': '#57acafcbdb4bc607922b834f' is not a valid selector."
Isn't HTML5 supposed to accept IDs beginning with a number? Is there a workaround for a situation where IDs of this type are needed?
<!DOCTYPE html>
<html>
<body>
<h2 id="57acafcbdb4bc607922b834f">A heading with class="example"</h2>
<p>A paragraph with class="example".</p>
<p>Click the button to add a background color to the first element in the document with class="example".</p>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
document.querySelector("#57acafcbdb4bc607922b834f").style.backgroundColor = "red";
}
</script>
</body>
</html>
IDs beginning with a number are indeed valid in HTML 5, but #57acafcbdb4bc607922b834f is not a valid CSS selector, and document.querySelector() uses CSS selectors.
You can use attribute selector instead:
document.querySelector('[id="57acafcbdb4bc607922b834f"]')
Or you can use document.getElementById():
document.getElementById('57acafcbdb4bc607922b834f')
See this code snippet:
console.log(document.querySelector('[id="57acafcbdb4bc607922b834f"]'))
console.log(document.getElementById('57acafcbdb4bc607922b834f'))
<div id="57acafcbdb4bc607922b834f"></div>
// Escape the first digit with its unicode value in hex
document.querySelector('#\\35 1').style.color = 'green'
// Or use getElementById
document.getElementById('52').style.color = 'red'
<div id="51"> Element 51, should be green </div>
<div id="52"> Element 52, should be red
Source: https://mothereff.in/css-escapes
I am returning special characters (specifically °) in JavaScript/jQuery, but it is not converting the entity to the desired character in the display. How can I display the degree sign correctly?
It must be simple; what am I missing? I have checked decodeURL, but it does nothing.
Demo fiddle
The HTML:
<p>Try to give answer is: </p>
<div id="target"></div>
<p>But should look like:</p>
<div> 5 °C</div>
And the Javascript with jQuery:
$('#target').text('5 °C');
Output:
To see the interpreted character entity you need to use html():
$('#target').html('5 °C');
Updated fiddle
Try this:
$('#target').html('5 °C');
text function escapes the html characters so you get what you see.
This question already has answers here:
Negative lookbehind equivalent in JavaScript
(11 answers)
Closed 9 years ago.
How to match a pattern that is not after a specified character?
Let's say the specified character is a space and we want to match #match
Eg: #match - finds "#match", because no space before it
#match and #match - finds the first #match but not the second one because there is a space before it.
ANTHING#match - should also find "#match", because no space before it.
Have you tried something like this?
/[^ ](pattern)/
But that won't match patterns at the beginning of the string, so you could use that in combination with:
/^pattern/
I'm not sure... but for all trying to answer this question, here's a jsfiddle where you can just enter your REGEX where it says INSERT_REGEX_HERE and see if it works. Enjoy!
<div ng-app>
<form novalidate name="myForm">
<input name="input1" type="text" ng-model="input1" ng-pattern="/INSERT_REGEX_HERE/" />
<div ng-show="myForm.input1.$dirty && myForm.input1.$error.pattern">DOES NOT MATCH REGEX</div>
</form>
</div>
http://jsfiddle.net/MLhqT/2/
This question already has answers here:
How to unwrap text using jQuery?
(6 answers)
Closed 9 years ago.
I am new to Regex and hope someone can help me with the following:
I have a long string that is saved as a variable.
The string contains plain text and HTML tags, incl. p tags.
How can I use Regex to remove all p tags from my string including classes and IDs on the p tags but without losing the text inside ?
The string variable can contain one, multiple or no p tags but always contains at least some text.
Example:
How it looks now:
var str = Some awesome text with a <p class='myClass'>new paragraph</p> and more text.
How it should look:
var str = Some awesome text with a new paragraph and more text.
Thanks for any help with this, Tim.
result = str.replace(/(<p[^>]+?>|<p>|<\/p>)/img, "");
updated regex
Based on this answer that's easy enough to do in jQuery.
var str = "Some awesome text with a <p class='myClass'>new <b>paragraph</b></p> and more text.";
var $temp = $("<div>").html(str);
$temp.find("p").each(function() {
$(this).replaceWith(this.childNodes);
});
var output = $temp.html();
$("#original").html(str);
$("#input").text(str);
$("#output").text(output);
$("#result").html(output);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="original"></div>
<pre id="input"></pre>
<pre id="output"></pre>
<div id="result"></div>