javascript regular expression - getting value after colon, without the colon
Question
I have tried the https://www.regex101.com/#javascript tool, as well as a similar stackoverflow question and yet haven't been able to solve/understand this. Hopefully someone here can explain what I am doing wrong. I have created as detailed, step-by-step of an example as I can.
My goal is to be able to parse custom attributes, so for example:
I wrote some jquery code to pull in the attribute and the value, and then wanted to run regex against the result.
Below is the html/js, the output screenshot, and the regular expression screenshot, which says my regex query should match what I am expecting.
Expected result: 'valOne' Result: ':valOne' <-- why am I getting a ':' character?
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('[customAttr]').each(function(){
var attrValues = $(this).attr('customAttr');
var regEx_attrVal = /[\w:]+?(?=;|$)/g;
var regEx_preColon = /[\w]+?(?=:)/g;
var regEx_postColon = /:(\w*)+?(?=;|\b)/g;
var customAttrVal = attrValues.match(regEx_attrVal);
var customAttrVal_string = customAttrVal.toString();
console.log('customAttrVal:');
console.log(customAttrVal);
console.log('customAttrVal_string: '+customAttrVal_string);
var preColon = customAttrVal_string.match(regEx_preColon);
preColon_string =preColon.toString();
console.log('preColon');
console.log(preColon);
console.log('preColon_string: '+preColon_string);
var postColon = customAttrVal_string.match(regEx_postColon);
postColon_string = postColon.toString();
console.log('postColon');
console.log(postColon);
console.log('postColon_string: '+postColon_string);
console.log('pre: '+preColon_string);
console.log('post: '+postColon_string);
});
});
</script>
</head>
<body>
<div customAttr="val1:valOne">
Test custom attr
</div>
</body>
</html>
4 answers
solution1
1 2016-04-20 23:48:15
I haven't trudged through all the code, but something you need to understand about regexes is the difference between $0 and $1 .
$0 is highlighted in blue. That is the entire part the regex matched.
You want $1 . That's where the matches captured by the parenthesis are.
Read more about capture groups here .
var match = myRegexp.exec(myString);
alert(match[1]); // This accesses $1
solution2
1 ACCPTED 2016-04-20 23:53:56
When you use String#match() with a regex with a global modifier, all the capture groups (those strings in the regex101.com right-hand bottom 'MATCH INFORMATION' pane are the values captured into Groups with ID 1 and higher) defined in the pattern are lost, and you only get an array of matched values.
You need to remove /g from your regexps and fix them as follows:
var regEx_attrVal = /[\w:]+(?=;|$)/;
var regEx_preColon = /\w+(?=:)/;
var regEx_postColon = /:(\w+)(?=;|\b)/;
Then, when getting the regEx_postColon captured value, use
var postColon = customAttrVal_string.match(regEx_postColon);
var postColon_string = postColon !== null ? postColon[1] : "";
First, check if there is a postColon regex match, then access the captured value with postColon[1] .
See the whole updated code:
$(document).ready(function() { $('[customAttr]').each(function() { var attrValues = $(this).attr('customAttr'); var regEx_attrVal = /[\\w:]+(?=;|$)/; var regEx_preColon = /\\w+(?=:)/; var regEx_postColon = /:(\\w+)(?=;|\\b)/; var customAttrVal = attrValues.match(regEx_attrVal); var customAttrVal_string = customAttrVal.toString(); console.log('customAttrVal:'); console.log(customAttrVal); console.log('customAttrVal_string: ' + customAttrVal_string); var preColon = customAttrVal_string.match(regEx_preColon); preColon_string = preColon.toString(); console.log('preColon'); console.log(preColon); console.log('preColon_string: ' + preColon_string); var postColon = customAttrVal_string.match(regEx_postColon); var postColon_string = postColon !== null ? postColon[1] : ""; console.log('postColon'); console.log(postColon); console.log('postColon_string: ' + postColon_string); console.log('pre: ' + preColon_string); console.log('post: ' + postColon_string); }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div customAttr="val1:valOne"> Test custom attr </div>
solution3
1 2016-04-20 23:57:48
use data attributes. you can store json strings in them and access them like objects.
HTML
<div id='div' data-custom='{"val1":"valOne","a":"b"}'></div>
jQ
$("#div").data("custom").val1; //valOne
$("#div").data("custom").a; //b
solution4
0 2016-04-21 00:34:59
I guess this is the regex pattern that you're looking for:
(?!(.*?):).*
Explanation
-
(.*?:)Select all type of values and any number of times and a match that contains (:) simbol -
(?! :)select inverse values of the first pattern, its kinda negation -
( ).*Select all type of values after the evaluations
Also you can do the same with Jquery substring which for me the most simple way to do it, just like this:
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.