Swapping Words in a String Using Capturing Parentheses
Problem
You want to accept an input string with first and last name, and swap the names so the last name is first.
Solution
Use capturing parentheses and a regular expression to find and remember the two names
in the string, and reverse them:
var name = "Abe Lincoln"; var re = /^(\w+)\s(\w+)$/; var newname = name.replace(re,"$2, $1");
EXPLAIN
Capturing parentheses allow us to not only match specific patterns in a string, but to
reference the matched substrings at a later time. The matched substrings are referenced
numerically, from left to right, as represented by $1 and $2 in the replace() method.
In the solution, the regular expression matches two words separated by a space. Cap‐
turing parentheses were used with both words, so the first name is accessible using $1,
the last name with $2.
The capturing parentheses aren’t the only special characters available with replace().
The second pattern, which reinserts the matched substring, can be used to provide a
simplified version of the Example 1-1 application shown in Recipe 1.6. That example
found and provided markup and CSS to highlight the matched substring. It used a loop
to find and replace all entries, but in Example 1-2 we’ll use replace() with the matched
substring special pattern ($&).
Using String.replace and special pattern to find and highlight text in astring
<!DOCTYPE html> <html> <head> <title>Searching for strings</title> <style> .found {
background-color: #ff0;
}
</style>
</head>
<body>
<form id="textsearch">
<textarea id="incoming" cols="100" rows="10"></textarea>
<p>
Search pattern: <input id="pattern" type="text" />
</p>
</form>
<button id="searchSubmit">Search for pattern</button>
<div id="searchResult"></div>
<script>
document.getElementById("searchSubmit").onclick=function() {
// get pattern
var pattern = document.getElementById("pattern").value;
var re = new RegExp(pattern,"g");
// get string
var searchString = document.getElementById("incoming").value;
// replace
var resultString = searchString.replace(re,"<span class='found'>$&</span>");
// insert into page
document.getElementById("searchResult").innerHTML = resultString;
}
</script>
</body>
</html> < span style="font-family: "arial" , "helvetica" , sans-serif;">
The captured text can also be accessed via the RegExp object using this exec() method.
Let’s return to the solution code, this time using exec():
var name = "Abe Lincoln"; var re = /^(\w+)\s(\w+)$/; var result = re.exec(name); var newname = result[2] + ", " + result[1];
This approach is handy if you want to access the capturing parentheses values, but
without having to use them within a string replacement.
Join Our Telegram Channel to Stay Updated
![Javascript DOM Tutorial Part 1 [ Selectors ] How to Select HTML Elements Using Javascript](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGFE3NttPjKRUzbBqnGQNT8mtxG71mrDGLb-k8f-rw_I9Ov3Tu9uIFQtUgoxOozsx2TNf449IJ7SPgrEFFqrDdN98mWUWXsp8zFUteAmA7UaXDDjyQHE5b0oVkCzXT_aIgCVFD_ksqt18/s72-c/jspart10.jpg)
No comments:
Post a Comment