I have a data like this,
var str = "#data time #city";
My goal is to make this as
var str = <a src="www.test/data">#data</a> time <a src="www.test/city">city</a>
I mean in my string where ever I found # its next value i.e data should be set as a param to the link www.test/{{param}} and should be surrounded with a link.Can any one suggest help.Thanks.
For this case, the String.replace() function will help you:
var str = "#data time #city"
str = str.replace(/#(\S+)/g, '#$1')
output.textContent = str
clickable.innerHTML = str
#output { font-family: courier }
<div id="output"></div>
<div id="clickable"></div>
The following code converts you data to the expected output.
The document.write(..) are for debug.
var data='#data time #city';
var hashtags = data.match(/#\S+/g);
document.write('before: ' + data + '</br>');
for (j = 0; j < hashtags.length; j++) {
// remove # from hashtag
var tag = hashtags[j].substring(1, hashtags[j].length);
// create the link
var link = '< a src="www.test/' + tag + '>#' + tag + '< / a > ';
// replace hashtag with link
data=data.replace(hashtags[j], link);
}
document.write('after: ' + data);
Related
var newInput = '{"id":"1","value":"Admin","prefix":"#"} asdas {"id":"24","value":"Ibiere Banigo","prefix":"#"}';
var gettingJson = newInput.match(/\{\"(.*?)\"\}/g);
var finalString = '';
$.each(gettingJson, function (index, value) {
var data = JSON.parse(value);
finalString = newInput.replace(/\{\"(.*?)\"\}/g, '#[' + data.id + ']');
});
console.log(finalString);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
This is my code I am trying to replace this the parenthesis with #[id] it is replacing it but for all like I want my output to be
#[1] someone new #[2]
but instead I am getting
#[2] someone new #[2]
Problem
The problem with your approach is the replace method replaces all matching occurrences.
Solution
Use replace method callback
replace(regexp, replacerFunction)
var newInput = '{"id":"1","value":"Admin","prefix":"#"} asdas {"id":"24","value":"Ibiere Banigo","prefix":"#"}';
var finalString = newInput.replace(/\{\"(.*?)\"\}/g, match => {
var data = JSON.parse(match);
return '#[' + data.id + ']'
})
console.log(finalString);
I have a passage of text, which might have multiple of the same word in it. Whenever this word appears, I want to replace it with itself, but wrapped in a div so that I can apply styles and add some extra text.
I have got this working for the first instance of the word:
var definition = glossaryList[index].definition;
var termStart = textAsLower.search(termAsLower);
var termEnd = term.length + termStart;
var replacedText = addDefinitionToText(textContent, term, definition, termStart, termEnd);
function addDefinitionToText(textContent, term, definition, termStart, termEnd) {
var textStart = textContent.substring(0, termStart);
var termInText = textContent.substring(termStart, termEnd);
var textEnd = textContent.substring(termEnd);
var replacedTerm = '<span class="has-definition">' + termInText;
replacedTerm += '<div class="attached-definition">';
replacedTerm += '<div class="defintion-title">' + term + '</div>';
replacedTerm += '<div class="definition-text">' + definition + '</div>';
replacedTerm += '</div>';
replacedTerm += '</span>';
return textStart + replacedTerm + textEnd;
}
I've tried putting this function into a while loop and counting up, but it is causing me issues and freezing or not returning what I am expecting:
while(something.toLowerCase().search(termAsLower)) {
var something = textAsLower.substring(termEnd);
termStart = something.search(termAsLower);
termEnd = term.length + termStart;
replacedText = addDefinitionToText(something, term, definition, termStart, termEnd);
something = replacedText.substring(termEnd);
}
Does anyone have a solution to this? Ideally I would actually like a different method to .search(), which finds all instances not just the first, but my searches haven't been too fruitful.
Thanks!
You can simply use regex to achieve what you want:
var searchWord = "tag";
var textStr = "HTML tag is used for scripting. Tag can also be self-closing.";
// case-insensitive regex
var re = new RegExp(searchWord, "gi");
textStr = textStr.replace(re, '<' + searchWord + '>');
// case-sensitive search
var re = new RegExp(searchWord, "g");
textStr = textStr.replace(re, '<' + searchWord + '>');
I did something like this before. I split the text by spaces and put that array into foreach and edit. Here's an exapmle code
if(text.includes("http")){
var returnString = '';
text.split(" ").forEach(function(link) {
if(link.includes("http")){
returnString += '<a target="_blank" style="color:white" href="' + link + '">here</a> ';
}else{
returnString += link + " ";
}
});
text = returnString;
A regular expression with the String replace method can solve this fairly easily.
This function will return a new string with the word and definition wrapped.
I have used a template literal to make things a bit cleaner but they are unsupported in IE.
function wrapWordWithDefinition(sentance, word, definition) {
var template = `<div>
<div class="attached-definition">
<div class="defintion-title">${word}</div>
<div class="definition-text">${definition}</div>
</div>
</div>`;
// global and case insensitive
var re = new RegExp(word, 'gi');
return sentance.replace(re, template);
}
var sentance = "This will replace word, when word is encountered";
var myword = "word";
var definition = "The definition of the word";
var result = wrapWordWithDefinition(sentance, myword, definition);
console.log(result)
For further reading on regular expressions: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp
I have to replace all the special character form the html and i have created an array of special character having key value pairs of special characters and class name .
But this is not working . I have tried and the following is the code and fiddle link.
var SpClass = new Array();
SpClass["&"] = "ampClass";
function temp() {
var str = "";
var tempLen = SpClass.length;
var k = 0;
var htmlForRemoveChar = $("#test").html();
for (var splChar in SpClass) {
if (k > tempLen) {
$("#test").html(htmlForRemoveChar);
}
var tempChar = "/" + splChar + "/g";
alert(htmlForRemoveChar);
htmlForRemoveChar = htmlForRemoveChar.replace(tempChar, '<span class="specialChar "' + SpClass[splChar] + '"">W</span>');
alert(htmlForRemoveChar);
k++;
}
$("#test").html(htmlForRemoveChar);
}
<div id="test">this is test & i am doing testing</div>
<input type="button" onclick="temp();" value="Remove&">
http://jsfiddle.net/aps123/y4McS/1/
You just need to change this line:
var tempChar = "/" + splChar + "/g";
To:
var tempChar = new RegExp(splChar, 'g');
At present you're replacing a literal String, e.g. '/a/g'. If you need to dynamically create the contents of a regex then you need to use RegExp. If the contents is static then you can use a regex literal.
Try replacing replace(tempChar with replace(new RegExp(splChar, 'g').
It looks like you are using a string literal, not a regex literal. A regex literal is like this:
var x = /x/g;
I was wondering how to keep outputs saved in the textarea box..
I'm writing a javascript program to translate english words to pig latin, so hello would be ellhay.
Anyways, say I type in "are" and in the textarea it translates it to "reaay" and then I type in "hello" (translation "ellohay") the textarea should output "ellohay" and "reaay" under it
I've tried this (edit now trying with array called outputs):
function printLatinWord() {
<!--
var outputs = new Array();
var input = document.form.english.value;
var lowercase = input.toLowerCase();
var fininput = lowercase.split (" ");
var output = "";
for (i = 0; i < fininput.length; i++) {
var result = fininput[i];
output += result.substring (1, result.length) + result.substring(0,1) + "ay ";
document.form.piglat.value = output + "\n";
var j = 0;
output = outputs[j];
j++;
}
/*
var newtext = "\n";
document.form.piglat.value = newtext + document.form.piglat.value;
//trying to keep running display of conversions
var newtext = ("\n");
output += newtext;*/
}
Basically nothing new happens with
At the end the var newtext is supposed to be where the outputs are stored.. but I'm not sure exactly how to get the values from the textarea and keep them there to be displayed under new outputs, if that makes sense.
document.form.piglat.value += newtext; appends newtext to the existing value. If you want it prepended instead, use
document.form.piglat.value = newtext + document.form.piglat.value;
The thing im trying to do right now is pulling in multiple links from a textarea,
We can pretend that a user inputs c:\pics\img01.jpg and in the next row he'll have the next imglink.
I want to pull those links, I allready have the code for that:
var entered = $('#filedir').val();
var lines = entered.split(/\r\n/);
var opttext = "";
for(var i=0;i<lines.length;i++) {
opttext += '< img src="' + lines[i] + '">< /img>';
}
the problem is in the output which is:
< img src="file:///C:/pics/img01.jpgc:/pics/img02.jpg">< /img>
There should be two < img> elements..
Where am I going wrong?
I've been at it for a bit over 2 hours now..
It's likely that your lines aren't getting split correctly and you're ending up with one long line in the array. Try this instead:
var lines = entered.split(/\n/);
for(var i=0;i<lines.length;i++)
{
opttext += '<img src="' + lines[i] + '"></img>';
}
Your for loop was incorrect.