Security News
Oracle Drags Its Feet in the JavaScript Trademark Dispute
Oracle seeks to dismiss fraud claims in the JavaScript trademark dispute, delaying the case and avoiding questions about its right to the name.
By Sarah Gooding - Feb 07, 2025
New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
keyword-in-context
Advanced tools
Keyword-In-Context
A visualization that displays a keyword in context view given a text and a query. An example is show below with the query highlighted in red.
Usage
There are two primary ways to use this component. Via script tags, which is suitable for beginners, or as a react component for those more experienced in web development.
Via Script Tags
To use the component via script tags. Download this repository and look in the dist folder. There are two files there of particular note
-
keyword_in_context.js- The component. -
keyword_in_context.deps.js- The dependencies for the file above split out into a separate file.
All of these files are minified which may make them hard to read. So they all have corresponding source maps that end in .map.
You should copy both these files into your project.
Sample HTML file — This is your index.html or similar
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<title></title>
<script type="text/javascript" src="./keyword_in_context.deps.js"></script>
<script type="text/javascript" src="./keyword_in_context.js"></script>
</head>
<body>
<div id='main'></div>
</body>
<script type="text/javascript">
// This config can be loaded from an external location using ajax.
var config = {
"contextSize": 20,
"caseSensitive": false,
"query": "",
"limit": 100
};
// The data can be loaded from an external location.
var data = [
{
"name": "Alice in Wonderland" ,
"text": "Alice was beginning to get very tired of sitting by her sister"
}
];
// The container we will render our component into.
var container = document.querySelector("#main");
// What is the query text (the keyword we are looking for).
var query = 'of';
// Package it all up and call the show function
var opts = {
config: config,
data: data,
container: container,
query: query
}
KeywordInContext.show(opts)
</script>
</html>
You can open this file in your browser to see it in action, but you will probably want to move to using a webserver, a simple one is the one built into python python -m SimpleHTTPServer.
As a react component
This module is implemented as a react component and can be used as such. Example code below
<KeywordInContext
caseSensitive={config.caseSensitive}
contextSize={config.contextSize}
text={data[0].text}
query={query}
limit={config.limit}
/>
You would most likely get the component via NPM using npm install keyword-in-context. Since the project is written in ES6 and React/JSX you will need a build system that can transpile these to ES5. We use webpack, see this repo and our webpack.config.js for guidance.
See below for documentation of parameters
Parameters
- caseSensitive [Boolean]: Whether search is case sensitive.
- contextSize [Integer]: The number of characters to display on either side of the match.
- text [String]: The text to search.
- query [String]: The text to search for.
- limit [Integer] (optional): Max number of matches to render.
Customization
CSS can be used to customize the display of this component and it is expected that you would use css to customize the component to fit in your context (e.g. constrain the height of the component). See this stylesheet for a sense of what styles you can define.
Dev Workflow
The project is written in ES6/ES2015 with React and JSX and uses webpack for building and webpack-dev-server during development.
These can be accessed via npm scripts
npm start - to start the server in dev mode (with a watcher). Go to localhost:8080/demo.html when this is running to start execution from html.html. You can change the value in sample_data and refresh to see a change in the vis.
npm run build-fast - execute the build without minification.
npm run build-all - execute the build.
See webpack.config.js and webpack.dev.config.js for details.
FAQs
A keyword-in-context view for text
The npm package keyword-in-context receives a total of 0 weekly downloads. As such, keyword-in-context popularity was classified as not popular.
We found that keyword-in-context demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Package last updated on 20 Jan 2016
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Related posts
Security News
Linux Foundation Warns Open Source Developers: Compliance with Sanctions Is Not Optional
The Linux Foundation is warning open source developers that compliance with global sanctions is mandatory, highlighting legal risks and restrictions on contributions.
By Sarah Gooding - Feb 06, 2025
Security News
Maven Central Adds Sigstore Signature Validation
Maven Central now validates Sigstore signatures, making it easier for developers to verify the provenance of Java packages.
By Sarah Gooding - Feb 06, 2025